JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
<div class='left'>


</div>
<div class='middle'>

</div>
<div class='right'>

</div>
</div>

CSS

.left, .right {
  flex: 250px 0 0;
  background-color: yellow;
}
.container {
  display: flex;
  width: 100%;
}
.left, .right, .middle {
  height: 300px;
}
.middle {
  flex: 1;
  background-color: red;
}