JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrp-cols">
<div class="col col-one">
  <div class="el">
  
  </div>
  <div class="el">
  
  </div>
</div>

<div class="col col-two">
  <div class="el el_2">
  </div>
</div>

<div class="col col-three">
  <div class="el">
  
  </div>
  <div class="el">
  
  </div>
</div>

<div class="col col-four">
  <div class="el">
  
  </div>
  <div class="el">
  
  </div>
</div>
</div>

CSS

.wrp-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}
.col {
  width: 25%;
  height: 100%;
  padding: 3px;
}
.el {
  min-height: 50%;
  border: 1px solid #000000;
  margin-bottom: 6px;
}
.el_2 {
  min-height: calc(100% + 7px);
}

/*
.col-two {
  width: 40%;
  -webkit-order: 4;
      -ms-flex-order: 4;
          order: 4;
}
*/