JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex_table">
      <div class="flex_row">
        <div class="flex_col">
          example1
        </div>
        <div class="flex_col">
          example2
        </div>
      </div>
    <div class="flex_row">
      <div class="flex_col">
          example3
        </div>
        <div class="flex_col">
          example4
        </div>
    </div>
</div>

CSS

.flex_table{
    display:flex;
    flex-direction:column;
}
.flex_row{
    display:flex;
    flex:1 1 auto;
    height:50px;
}
.flex_col{
    flex: 1;
}
.flex_row:nth-child(even){
  background-color: #eee;
}
.flex_row:nth-child(odd){
   background-color: #F7F7F7;
 }
 .flex_col:nth-child(1){
    border-right:1px solid #000;    
}
.flex_col:nth-child(2){
   margin-left:20px; 
}