JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex vertical">    
  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>   
  <div class="flex">    
    <div class="box"> </div>  
    <div class="box"> </div>    
    <div class="box"> </div>                
    <div class="box"> </div>              
  </div>   

  <div class="flex">
    <div class="box"> </div>    
    <div class="box"> </div>                
  </div>           
</div>

CSS

body{
    margin: 0;
    padding: 0;
    border: 1px solid red;
}

.flex{
  display: -ms-flexbox;    
  display: -webkit-box;    
  display: -webkit-flexbox; 
  display: -webkit-flex;
  display: flex;            
}    

.flex > *{ margin: 0 10px; }    
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }

.flex.vertical > *{ margin: 10px 0; }    
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }

.vertical{
      -webkit-box-orient: vertical;    
         -moz-box-orient: vertical;    
              box-orient: vertical;    
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;      
}

.box{
  background: #000;
  flex: auto;
  min-height: 100px;
}