JSFiddle - React, Tailwind, and code Playground

HTML

<div class="VBox Full">
  <div class="HBox"> 1 </div>
  <div class="HBox Grow">
    <div> 2 </div>
    <div class="Grow Center"> 5 </div>
    <div> 3 </div>
  </div>
  <div class="HBox"> 4 </div>
</div>

CSS

.VBox    { display: flex; flex-flow: column nowrap; }
    .HBox    { display: flex; flex-flow: row nowrap;    }
    .VGrid   { display: flex; flex-flow: column wrap; align-items: flex-start; }
    .HGrid   { display: flex; flex-flow: row wrap;    align-items: flex-start; }
    .Grow    { flex-grow: 2; }
    .Center  { text-align: center; }
    .Full { height: 95vh; }