JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div>1111111111 1111111111 1111111111</div>
  <div>2222222222 2222222222</div>
  <div>3333333333 3333333333 3333333333</div>
  <div>4444444444 4444444444 4444444444</div>
</div>

<div class="flex">
  <div>1111111111 1111111111 1111111111</div>
  <div>2222222222 2222222222</div>
  <div>3333333333 3333333333 3333333333</div>
  <div>4444444444 4444444444 4444444444</div>
</div>

<div class="container">
  <div class="left">1111111111 1111111111 1111111111</div>
  <div class="middle">
    <div>2222222222 2222222222</div>
    <div>3333333333 3333333333 3333333333</div>
  </div>
  <div class="right">4444444444 4444444444 4444444444</div>
</div>

CSS

/*TABLE SOLUTION*/

div.table {
    display: table;
    width: 100%;
    height: 10em;
    margin-bottom: 1em;
}
div.table div {
    display: table-cell;
}
div.table div:nth-child(1) {
    width: 5em;
    background: #0089fa;
}
div.table div:nth-child(2) {
    background: #ff002b;
}
div.table div:nth-child(3) {
    background: #ffa900;
}
div.table div:nth-child(4) {
    width: 5em;
    background: #00a753;
}

/*FLEX SOLUTION*/

div.flex {
    display : inline-flex;
    width: 100%;
    height: 10em;
    margin-bottom: 1em;
    min-width: 320px;
}
div.flex div:nth-child(1) {
    width: 5em;
    min-width: 5em;
    background: #0089fa;
}
div.flex div:nth-child(2) {
    flex-grow: 1;
    background: #ff002b;
}
div.flex div:nth-child(3) {
    flex-grow: 1;
    background: #ffa900;
}
div.flex div:nth-child(4) {
    width: 5em;
    min-width: 5em;
    background: #00a753;
}

/*container SOLUTION*/

div.container {
    width: 100%;
    height: 10em;
    margin-bottom: 1em;
    min-width: 320px;
}
div.container div {
    float: left;
    box-sizing: border-box;
    height: 10em;
    position: relative;
}
div.container .left {
    width: 5em;
    background: #0089fa;
}
div.container .middle {
    top: -10em;
    width: 100%;
    padding: 0 5em;
}
div.container .middle div:nth-child(1) {
    max-width: 50%;
    min-width:50%;
    background: #ff002b;
}
div.container .middle div:nth-child(2) {
    max-width: 50%;
    min-width:50%;
    background: #ffa900;
}
div.container .right  {
    top: -20em;
    float: right;
    width: 5em;
    background: #00a753;
}