JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <span class="block left"></span>
  <span class="block">1</span>
  <span class="block">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
  <span class="block right"></span>
</div>

CSS

.main{
  display:flex;
  
}
.block{
  flex:0 0 100px;
}
.left, .right{
  flex:1 0 auto;
}
.block:nth-child(1){
  background:DeepSkyBlue;
}
.block:nth-child(2){
  background:DeepSkyBlue;
}
.block:nth-child(3){
  background:RoyalBlue;
}
.block:nth-child(4){
  background:MediumOrchid;
}
.block:nth-child(5){
  background:Fuchsia;
}
.block:nth-child(6){
  background:Fuchsia;
}