JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">

  <div class="flex-boxes">
    A
  </div>
  
  <div class="flex-boxes-1">
    B
  </div>
  
   <div class="flex-boxes">
    C
  </div>


</div>

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.flex-boxes {
  flex-grow: 2;
  border: 2px solid red;
}

.flex-boxes-1 {
  flex-grow: 1;
  border: 2px solid red;
}

.cat {
  width: auto;
  
}