<div class="wrapper">
  <div class="item__left">
    <img src="https://placeimg.com/640/480/any" alt="">
  </div>
  <div class="item__right">
    <div class="item__right-row">
      <div class="item"><img src="https://placeimg.com/640/480/animals" alt=""></div>
      <div class="item"><img src="https://placeimg.com/640/480/nature" alt=""></div>
    </div>
    <div class="item__right-row">
      <div class="item"><img src="https://placeimg.com/640/480/tech" alt=""></div>
      <div class="item"><img src="https://placeimg.com/640/480/people" alt=""></div>
    </div>
  </div>
</div>

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wrapper {
  display: flex;
  height: 100vh;
  background-color: #CCC;
}

.item__left {
  width: 30%;
  background-color: blue;
}

.item__right {
  width: 70%;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.item__right-row {
  height: 50%;
  display: flex;
}

.item__right-row:first-child .item {
  width: 50%;
}

.item__right-row:last-child .item:first-child {
  width: 40%;
}

.item__right-row:last-child .item:last-child {
  width: 60%;
}