JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-container">
    <div id="col1">
      first
    </div>
    <div id="col2">
      second
    </div>
    <div id="col3">
      third
    </div>
    <div id="col4">
      fourth
    </div>
  </div>

CSS

#main-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 8px 24px;
    }

    #col1 {
      background: blue;
      display: flex;
      align-items: center;
      overflow: hidden;
      word-wrap: break-word;
      min-height: inherit;

    }

    #col2 {
      background: yellow;
      align-items: center;
      overflow: hidden;
      word-wrap: break-word;
      min-height: inherit;
      display:inline-block;
    }

    #col3 {
      background: green;
      flex: 1;
      display:inline-block;
      min-height: inherit;
    }

    #col4 {
      background: indigo;
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
      word-wrap: break-word;
      min-height: inherit;

    }