JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="margin left">left</div>
  <div class="text left">text</div>
  <div class="center">center</div>
  <div class="text right">text</div>
  <div class="margin right">right</div>
</div>

CSS

html{height:100%;}
body{height:100%;margin:0;}
.main{
  display:flex;
  flex-direction:row;
  min-height:100%;
}
.left{
  text-align:right;
}
.right{
  text-align:left;
}
.margin{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.text{
  display:flex;
  flex-direction:column;
  flex-basis:200px;
  flex-grow:0;
}
.center{
  display:flex;
  flex-direction:column;
  flex-basis:50px;
  flex-grow:0;
  text-align:center;
}