JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="cont">
  <div class="left">LEFT</div>
  <div class="center1">CCC</div>
  <div class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cumque eius similique maiores dolores impedit, quam, et id sed, hic qui. Consectetur consequuntur ut sit debitis adipisci quasi soluta labore.</div>
  <div class="right">R</div>
</div>

CSS

.cont {
  display: flex;
  width: 200px;
  height: 80px;
  border: 1px solid #000;
}

.left {
  background: red;
}

.center1 {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 2;
  background: blue;
  overflow: hidden;
}

.center2 {
  flex-basis: 100px;
  flex-grow: 30;
  flex-shrink: 5;
  background: purple;
  overflow: hidden;
}

.right {
  background: green;
}