JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <span></span>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item ">flex item 3</div> 
</div>

CSS

.flex-container{
  display:flex;
  flex-direction:row;
  border:2px blue solid;
}

.flex-container > span{
  flex-grow:1; 
}

.flex-container > .flex-item{
  border:2px red solid;
  flex-grow:0;
}