PHP data echo not layouting properly - php

Question

I'm trying to create a PHP page that displays 6 data from a table at a time however there is a problem with the layout of how these data are displayed, I believe this problem comes from the styling
The layout is supposed to look something like this:
Screen shot 01
Screen shot 02
I have tried playing around with every single div element on the code below, however, I am unable to find the right width that the data is displayed like the image, right now I'm not sure anymore where the problem with the layout comes from.
This is how it looks like:
Screen shot
PHP:
<div id="greenLine"></div>
<div id="content">
<div class="container">
<form action="search_product.php" method="post"> <!--Action: Sent to "search_product.php" Method: The data will be displayed by "post"-->
<label>Search Product:<br></label>
<input type="text" name="search" placeholder="Enter Product Name"> <!--The name of the numbers inputted are "nilai"-->
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<?php
$koneksi = new mysqli ("localhost","REDACTED","REDACTED","cm0491_progress_business_db_2");
$sql = "SELECT * FROM `product_tbl` LIMIT 6";
$querynews = $koneksi->query($sql);
$rownews = $querynews->fetch_assoc();
// var_dump($rownews); exit;
do {
?>
<div class="product_item">
<div class="number_icon"><?php echo $rownews['id_product']; ?></div>
<h2 class="product_title"><?php echo $rownews['name_product']; ?></h2>
<img src="images/<?php echo $rownews['gambar_product']; ?>"width="200"><br>
<p class="product_desc"><?php echo $rownews['description_product']; ?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
Read More<br><br><br>
</div>
<?php }while($rownews = $querynews->fetch_assoc()); ?>
</div>
<!--- END CONTENT WRAPPER -->
</div>
CSS:
#greenLine { background:url(../images/bg_top_img.jpg) center no-repeat #305D00; height:20px;}
#content { background:#fff; min-height:500px; margin-left:0%;}
.container {width:1200px; height:100%;margin:auto; overflow:auto; overflow-y:hidden; overflow-x:hidden; margin-left:20%;}
.product_item { min-height:280px; width:270px; margin:20px; float:left;}
.number_icon { height:56px; width:56px; background:url(../images/dropcap1.gif); text-align:center; font-size:43px; float:left; margin-bottom:10px; color:#FFF; }
.product_desc { line-height:20px; min-height:60px; color:#696969; margin-top:10px; font-size:14px; font-style:italic; auto;}
I'm genuinely confused with what's happening to the layout and would greatly appreciate anyone willing to help, thank you.

Answer 1

P.S Avoid posting database variables or passwords
Use flex to achieve consistent results, I have your removed php codes for simplicity, just echo where necessary
.product_item{
display:flex;
flex-direction:column;
}
.product_item .title_area{
display:flex;
flex:1;
align-items: center;
}
.product_item .number_icon{
background:green;
width:20px;
height:20px;
border-radius:50%;
color:white;
text-align:center;
line-height:20px;
margin-right:5px;
}
.product_item img{
width:100%;
max-height:200px;
object-fit:cover;
}
<div class="container">
<div class="product_item">
<div class="title_area">
<div class="number_icon">1</div>
<h2 class="product_title">Furniture</h2>
</div>
<img src="http://placehold.it/200x150">
<p class="product_desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
Read More<br><br><br>
</div>
</div>
<!--- END CONTENT WRAPPER -->
</div>