height alignment issue while displaying the products - css

Question

I am doing an eCommerce project. While displaying the products list, if I insert any content inside, height will vary and total alignment is disturbed.
You can see the code below. I'm using bootstrap 4.
#product_list {
width: 210px;
margin-right: 0px;
font-size: 14px;
}
.product-item {
width: 100%;
height: 350px;
cursor: pointer;
background-color: #FFFFFF;
}
.product {
width: 100%;
height: 350px;
border: solid 2px #e9e9e9;
}
.product_image {
width: 100%;
text-align: center;
}
.product_image img {
width: 70%;
height: 70%;
}
<!-- Start to products display -->
<ul class="inline-item pt-2" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price">
<span>MRP : <del>$50</del></span> ❙ <span> <b> Sale : $40 </b> </span>
</div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 ">
<a class="btn btn-sm text-white" id="background_color" href="#">add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color" href="#">add to cart</a></div>
</div>
</div>
</div>
</li>
........
</ul>
This the code I am using to display the products ,while displaying if the list items content and images everything same it will display clearly. If I insert any content inside height alignment issue is arising.

Answer 1

<ul class="inline-item pt-2 d-flex flex-wrap" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color"
data-toggle="modal" data-target="#myModal1">
1kg
</button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color"
href="#">add
to cart</a></div>
</div>
</div>
</div>
</li>
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color"
data-toggle="modal" data-target="#myModal1">
1kg
</button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color"
href="#">add
to cart</a></div>
</div>
</div>
</div>
</li>
</ul>
<style>
/* Start to css for product list */
#product_list {width:210px;
margin-right: 0px;
font-size: 14px;}
.product-item
{
width: 100%;
height: 350px;
cursor: pointer;
background-color: #FFFFFF;
}
.product {
width: 100%;
height: auto;
border: solid 2px #e9e9e9;
max-height: 600px;
}
.product_image
{
width: 100%;
text-align: center;
}
.product_image img
{
width: 70%;
height:70%;
}
/* END to css for product list */
</style>
use "d-flex" and "flex-wrap" class for ul tag. and use max-height instead of height.
I hope it would be helpful.