Display picture to the left of a div card

Issue

For a project, I need to reproduce the following card element.

However, I have a little problem, I just can't put the picture to the left. I tried to use float: left; and some, quite questionable, other means but it just doesn't work.

Here is my code:

#accommodation-popular {
  flex-grow: 1;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px 0px 16px;
}

#popular-nav {
  display: flex;
  flex-flow: column wrap;
}

.popular-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: max-content;
  max-width: 250px;
  cursor: pointer;
}

.popular-picture {
  border: 3px solid white;
  border-radius: 10px;
  width: 180px;
  height: 100px;
  object-fit: cover;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
             1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-popular">
  <h3>Most popular</h3>
  <i style="color: black;" class="fa-solid fa-star fa-xm"></i>
  <div id="popular-nav">
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/QPMiJ.jpg">
      <h5>Morning Sun Hotel</h5>
      <p>Night starting at <strong>128€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/uW6MA.jpg">
      <h5>Au coeur de l'eau Bed and Breakfast</h5>
      <p>Night starting at <strong>71€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/ptKan.jpg">
      <h5>Tout bleu et Blanc Hotel</h5>
      <p>Night starting at <strong>68€</strong></p>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      <i style="color: #dfdddd;" class="fa-solid fa-star fa-2xs"></i>
    </div>
  </div>
</div>

I thank in advance anybody who will take the time to try to help me.

Solution

Using flex as an alternative to float makes more sense here. Because you have item info and a picture it makes sense to group the item info in a div so that they are grouped together when you set display: flex; on the parent .popular-item. I called the grouped item info .info-container.

Pro tip: You can specify margin- left, right, and bottom of 10px by writing: margin: 0px 10px 10px but I think padding is more fitting here since you are trying to create space within the element.

#accommodation-popular {
  flex-grow: 1;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px 0px 16px;
}

#popular-nav {
  display: flex;
  flex-flow: column wrap;
  gap: 1em;
}

.popular-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  padding: 0 3px 3px;
  max-width: 375px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1em;
}

.popular-picture {
  border: 3px solid white;
  border-radius: 10px 0px 0px 10px;
  max-width: 50%;
  object-fit: cover;
}

.flex-container {
  display: flex;
  align-items: center;
  gap: 225px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-popular">
  <div class="flex-container">
    <h3>Most popular</h3>
    <i style="color: black;" class="fa-solid fa-star fa-xm"></i>
  </div>
  <div id="popular-nav">
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/QPMiJ.jpg">
      <div class="info-container">
        <h5>Morning Sun Hotel</h5>
        <p>Night starting at <strong>128€</strong></p>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      </div>
    </div>
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/uW6MA.jpg">
      <div class="info-container">
        <h5>Au coeur de l'eau Bed and Breakfast</h5>
        <p>Night starting at <strong>71€</strong></p>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      </div>
    </div>
    <div class="popular-item">
      <img class="popular-picture" src="https://i.stack.imgur.com/ptKan.jpg">
      <div class="info-container">
        <h5>Tout bleu et Blanc Hotel</h5>
        <p>Night starting at <strong>68€</strong></p>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
        <i style="color: #0065FC;" class="fa-solid fa-star fa-2xs"></i>
      </div>
    </div>
  </div>
</div>

Answered By - Kameron