JSFiddle - React, Tailwind, and code Playground

by Mahavirsinh Padhiyar

HTML

<div class="main">
  <div class="row">
   <div class="col">
    <span>A</span>
   </div>
   <div class="col">
    <span>D</span>
   </div>
   <div class="col">
    <span>B</span>
   </div>
  </div>
  <div class="row">
   <div class="col">
    <span>E</span>
   </div>
   <div class="col">
    <span>C</span>
   </div>
</div>

CSS

.main {
  display: inline-block;
}

.row {
  float: left;
  display: flex;
  flex-direction: column;
}

.col {
  width: 20px;
  border: 1px solid #000;
  flex: 1 auto;
  margin: 1px;
}