JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper flex-shrink">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS

.wrapper {
  display: flex;
  width: 300px;
  background:#f00;
}
.wrapper div{
  width:200px;
}

.wrapper div:nth-child(1){
  background: rgb(0, 137, 250);
  flex-basis: 155px;
  flex-shrink: 2;
}

.wrapper div:nth-child(2){
  background: rgb(233, 30, 99);
  flex-basis: 200px;
  flex-shrink: 1;
}

.wrapper div:nth-child(3){
  background: rgb(0, 150, 136);
  flex-basis: 50px;
}