I am trying to make a responsive web-page as per the image attached only in HTML and CSS, so far the mentioned code is only for the first row and there would be seven rows, I tried styling it using flex-box but I am unable to rectify and get it same as per the image
<div class="body-div">
<div class="car-container">
<div class="car-rows">
<div class="price-div">
<h1 class="price-header">10.99</h1>
<p class="price-para">USD/DAY</p>
<button>SELECT</button>
<p class="price-para">Total 76.93 USD</p>
</div>
<div class="image-div">
<div>
<img src="./vehicles/car1.gif" alt="car 1 image" />
<p class="image-text">Extra Small Car</p>
</div>
</div>
<div class="passenger-details">
<div class="icon-div">
<ul>
<li>
<i class="fa-solid fa-person"><span class="passenger-span">
<strong style="color: black">x 4</strong> Passenger</span></i>
</li>
<li>
<i class="fa-solid fa-suitcase"><span class="passenger-span">
<strong style="color: black">x 2</strong> Small
Suitcases</span></i>
</li>
<li>
<i class="fa-solid fa-suitcase-rolling"><span class="passenger-span">
<strong style="color: black">x 0</strong> Large
Suitcases</span></i>
</li>
</ul>
</div>
</div>
<div class="car-details">
<ul>
<li>Automatic Transmission</li>
<li>Air Conditioning</li>
<li>24 miles/gallon</li>
</ul>
</div>
</div>