How to make these pictures same height?

Issue

I have these 4 pictures, and I want them to be like in the picture, but I can't make them. This is what I need to get This is the pictures in the code

This is my code

<div class="gallery">
          <div class="flex-item-40">
            <img src="./images/coast.jpg" alt="" />
          </div>
          <div class="flex-item-60">
            <img src="./images/island.jpg" alt="" />
          </div>
          <div class="flex-item-60">
            <img src="./images/balloon.jpg" alt="" />
          </div>
          <div class="flex-item-40">
            <img src="./images/mountain.jpg" alt="" />
          </div>
        </div>

.gallery {
    display: flex;
    flex-wrap: wrap;
  }

  .flex-item-40 {
    flex-basis: 40%;
  }

  .flex-item-60 {
    flex-basis: 60%;
  }

Solution

Let's assume: First img and Fourth img: (width: 436px, height: 151px) Second img and Third img: (width: 660px, height: 147) Of course, these variables depend on how you "cut" the images. Because as someone said before, you will get distortions if you don't adjust the images.

 <div class="gallery">
      <div class="item">
        <img src="up1.png" alt="Image 1" />
      </div>
      <div class="item wider">
        <img src="up2.png" alt="Image 2" />
      </div>
      <div class="item wider">
        <img src="down1.png" alt="Image 3" />
      </div>
      <div class="item">
        <img src="down2.png" alt="Image 4" />
      </div>
    </div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex-basis: calc(30% - 10px);
  margin-bottom: 10px;
}

.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.wider {
  flex-basis: calc(70% - 10px);
}

Result:

Answered By - Łukasz D. Mastalerz