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;
    position:relative;
    
}
.flex_table::after{
  content:'';
  position:absolute;
  width:1px;
  background-color:black;
  height:100%;
  left:50%;
  top:0;
  transform:translate3d(-50%,0,0);
  
}
.flex_row{
    display:flex;
    flex:1 1 auto;
    height:50px;
}
.flex_col{
    flex: 1;
}
.flex_row:not(:last-child) {
    border-bottom: 2px solid #fff;
}
.flex_row:nth-child(even){
  background-color: #eee;
}
.flex_row:nth-child(odd){
   background-color: #F7F7F7;
 }
.flex_col:nth-child(2){
   margin-left:20px; 
}