JSFiddle - React, Tailwind, and code Playground

HTML

<!-- recreating something like this is easy with those few classes -->
<!-- https://stuff.mit.edu/afs/athena/software/texmaker_v5.0.2/qt57/doc/qtwidgets/qtwidgets-layouts-borderlayout-example.html -->

<html>
<body class="VBox" style="height:98vh;"> 
  <div class="VBox Grow">
    <div class="HBox">
      <span>North</span>
    </div>
    
    <div class="HBox Grow Stretch">
      <div class="VBox Evenly">
        <span>West</span>
      </div>
      
      <p class="Grow">
        Central Widget
      </p>
      
      <div class="VBox Evenly">
        <span>East 2</span>
      </div>
      <div class="VBox Evenly">
        <span>East 1</span>
      </div>
    </div>
    
    <div class="HBox">
      <span>South</span>
    </div>
    
  </div>
</body>
</html>

CSS

/* generic for effect */
body { background-color: grey; color: black; }
div { border: 1px solid black; margin: 2px; }
p { border: 1px solid black; margin: 2px; background-color: white; }
span {padding: 2px; }

/* Vertical Layout, Horizontal Layout, and both in Grid Layout as well */
.VBox    { display: flex; flex-flow: column nowrap;                          }
.HBox    { display: flex; flex-flow: row nowrap;    align-items: center;     }
.VGrid   { display: flex; flex-flow: column wrap;   align-items: flex-start; }
.HGrid   { display: flex; flex-flow: row wrap;      align-items: center;     }

/* this equates to Qt Designers's "horizontal spacer" and "vertical spacer" */
.Grow    { flex-grow: 2; }

/* some convenience add in classes I prefer to keep separate */
.Around  { justify-content: space-around; }
.Between { justify-content: space-between; }
.Evenly  { justify-content: space-evenly; }
.Stretch { align-items: stretch; }