JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vwrapper">
  <div id="row1">
    this is the header
  </div>
  <div id="row2">
    this is the second line
  </div>
  <div id="row3">
    <div id="col1">
      col1
    </div>
    <div id="col2">
      col2
    </div>
    <div id="col3">
      col3
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0px;
}
.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

  #row1 {
    background-color: red;

  }

  #row2 {
    background-color: blue;
  }

  #row3 {
     background-color: green;
      flex: 1 1 auto;

    display: flex;
  }
    #col1 {
      background-color: yellow;
      flex: 1 0 240px;
    }

    #col2 {
      background-color: orange;
      flex: 1 1 200px;
    }

    #col3 {
      background-color: purple;
      flex: 1 0 240px;
    }