JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="fullheight fullwidth">

      <div class="fullheight" id="column1">
        <div id="filterRow">
            
            
            <div class="selectHolder" id="filters"><h1>Filter</h1><div class="spanHolder">
            </div></div>
            
        </div>

      </div>
      

        <div class="fullheight fullwidth" id="column2">
          <div class="row row--top">
            <div class="cell" id="cell1">cell one</div>
            <div class="cell-wrap">
              <div class="cell" id="cell2">cell two</div>
              <div class="cell" id="cell3">cell three</div>
            </div>
          </div>
          <div class="row row--bottom">
            <div class="cell" id="cell4">cell four</div>
            <div class="cell-wrap">
              <div class="cell" id="cell5">cell five</div>
            </div>
          </div>
        <!-- </div> -->

      </div>
    </div>

CSS

div#container {
      /*position: relative;*/
      padding-top: 50px;
      display: flex;
      /*flex-direction: row wrap;*/
      /*align-items: stretch;*/
    }


    div#column1 {
      flex: 0 0 auto;
      background-color: white;
      box-shadow: 3px 0px 10px #bebebe;
      z-index: 9999;
      overflow-y: scroll;

    }

    div#column2 {
      display: flex;
      flex-direction: column;
    }

    .row { display: flex; }

    .row--top { flex: 2;}

    .row--bottom { flex: 1; }



    .cell {
      flex: 1;
      padding: 0.5em;
      background-color: white;
      margin: 1em;
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    }

    .cell-wrap {
      flex-basis: 31%;
      display: flex;
      flex-direction: column;

    }

    .cell-wrap div {
      margin-left:0;
    }

    div.row--top div#cell1,
    div.row--top div.cell-wrap div {
      margin-bottom: 0;
    }

    div.fullwidth { width: 100%; }
    div.fullheight { height: 100%; }



    @media screen and (max-width: 1100px) {

      #container {
        height: auto;
      }

      .row { flex-direction: column; }

      .cell {
        flex-grow: 1;
        background-color: pink;
        /* flex-basis: 30vw; */
        padding-top: 16.67%; 

      }

      /*.flex.padding div {
          padding-top: 16.67%;
      }*/

      #cell4 {
        margin-bottom: 0;
      }

      .cell-wrap {
        width: 100%;
        flex-direction: column;

      }

      .cell-wrap div {
        margin-left:1em;
      }




    }

    @media screen and (max-width: 700px) {
      .cell {
        /*flex-grow: 0;*/
        background-color: yellow;
        padding-top: 16.67%;
        /* flex-basis: 50vw; */
      }

      div#column1 {
        display: none;
      }
    }