JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-col">
    
      <div class="col one">
      ONE
      </div>
    
      <div class="col two">
      TWO
      </div>
    
      <div class="col three">
      THREE
      </div>
    
    </div>

CSS

.flex-col {
  background:lightblue;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:row;
  flex:auto;
}

.col { 
  box-sizing:border-box;
  padding:10px;
  background:blue;
  text-align:center;
  border:solid 1px red;
}

.one { flex-grow:4; }
.two { flex-grow:2; }
.three { flex-grow:1; }