<div class="main">
     <div class="flexbox">
       <div class="row"><img src="https://via.placeholder.com/150"/>
       </div>
       <div class="row image-wrapper">
         <div class="col"><img src="https://via.placeholder.com/150"></div>
         <div class="col"><img src="https://via.placeholder.com/150"></div>

       </div>
       
     <div>
</div>

.main {
  width: 500px;
  
}

.flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

 .col {
  width: 100%;
  height: 250px;
  
  box-sizing: border-box;
  padding: 10px;
}


.col img {
  background: red;
  width: 100%;
  height: 100%;
}

.row {
  width: 50%; 
  height: 500px;
  padding: 10px;
  box-sizing: border-box;
}


.row img {
  background: black;
  width: 100%;
  height: 100%;
}

.row.image-wrapper {
  padding: 0;
}