[FIXED] How freely pack, arrange themselves according to width of each html elements (divs) inside large html element (div)?

Issue

here's the image

Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.

I've added my laravel view code below if you need.

<div class="col-md-4 border border-primary rounded">
    <h4>Short Eats</h4>
    @foreach($shorteats as $shrt)                    
        <div>
        <a href="#" onclick="order('{{$shrt->dish_name}}')" class="btn btn-li btn-lg"> {{$shrt->dish_name}}</a>          
        </div>
    @endforeach                
</div>

<div class="col-md-4 border border-primary rounded">
    <h4>Rice</h4>
    @foreach($rice as $ric)                    
        <div>
        <a href="#" onclick="order('{{$ric->dish_name}}')" class="btn btn-li btn-lg"> {{$ric->dish_name}}</a>          
        </div>
    @endforeach                
</div>

Solution

You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:

HTML:

<div class="menu-container">
    <a href="#" onclick="order('{{$ric->dish_name}}')" class="food-item btn btn-li btn-lg">{{$ric->dish_name}}</a>          
</div>

CSS:

.menu-container {
  display: flex;
  flex-wrap: wrap;
}

.food-item {
  // styles for your anchor tag go here
}

Answered By - monsteronfire

Answer Checked By - Gilberto Lyons (PHPFixing Admin)