JSFiddle - React, Tailwind, and code Playground

HTML

<div class='main-raw'>

  <div class="first-row">
    <div class='item item-1'>&nbsp</div>
    <div class='item item-2'>&nbsp</div>
  </div>
  
  <div class="second-row">
    <div class='item item-3'>&nbsp</div> 
    <div class='item item-4'>&nbsp</div> 
  </div>
  
  <div class="third-row">
    <div class='item item-5'>&nbsp</div> 
    <div class='item item-6'>&nbsp</div> 
  </div>
  
</div>

CSS

.main-raw {
  width: 650px;
  height: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-content: flex-end;
   align-content: flex-end;
   border:2px solid red; /* debug */
}
 
.item {
  width: 100px;
  margin: 10px;
  
  background-color: black;
}

.item-1 {
  height: 100px;
}

.item-2 {
  height: 200px;
}

.item-3 {
  height: 150px;
}

.item-4{
  height:150px;
}

.item-5 {
  height: 50px;
}

.item-6{
  height:250px;
}