JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainrow">
  <div class="col1">1</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
</div>

CSS

.mainrow {
  display: flex;
}

.mainrow div {
  padding:10px;
}

.col1 {
  flex-grow:1;
  background-color:red;
}
.col2 {
  flex-grow:4;
  background-color:green;
}
.col3 {
  flex-grow:4;
  background-color:blue;
}
.col4 {
  flex-grow:1;
  background-color:yellow;
}