Why is the div row giving me columns?

You seem to have each column wrapped in its own row, hence they fall underneath each other. Try putting both columns in the same row element. Something like this might solve you problem

<div class="row">
 <div class="col-md-4">
            <div class="d-flex"></div>
            <div class="separator-solid"></div>
            <h3 class="card-title">
                       {{$item->quantity}}<br>
                       {{$item->price}}<br>
                       {{$item->dish->name}}<br>
                       <hr>
            </h3>
        </div>
 <div class="col-md-4">
            <div class="d-flex"></div>
            <div class="separator-solid"></div>
            <h3 class="card-title">
                       {{$item->quantity}}<br>
                       {{$item->price}}<br>
                       {{$item->dish->name}}<br>
                       <hr>
            </h3>
        </div>
</div>

EDIT:

If you want to use a for/foreach loop, your code will look something like this:

<div class="row">
@foreach(var item in data){
<div class="col-md-4">
  <div class="d-flex"></div>
  <div class="separator-solid"></div>
  <h3 class="card-title">
   @item.Quantity<br>
    @item.Price<br>
    @item.Name<br>
    <hr>
  </h3>
</div>
}
</div>