JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
  <div class="item item-1">
  A
  </div>
  <div class="item item-2">
  B
  </div>
  <div class="item item-3">
  C
  </div>
  <div class="item item-4">
  D
  </div>
</div>

CSS

#test {
 display: flex; 
}
.item {
  background-color: #444;
  padding: 5px 10px;
  margin: 5px;
  flex: 1 1 33%;
}
.item-1 {
  height: 50px;
}
.item-3 {
  order: 1;
}