JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="outer-1">
  
  </div>
  <div class="outer-2">
      <div class="inner">
  
      </div>
      <div class="inner">
  
      </div>
      <div class="inner">
  
      </div>
  </div>
  <div class="outer-3">
  
  </div>
</div>

CSS

.container{
  display: flex;
}
.outer-1{
  background: red;
  height: 100px;
  flex: 1;
}
.outer-2{
  display: flex;
  flex: 1;
}
.outer-3{
  background: blue;
  height: 100px;
  flex: 1;
}
.inner{
  flex-basis: 30px;
  background: green;
  height: 100px;
  margin: 0 3px;
}