JSFiddle - React, Tailwind, and code Playground

by Nicholas Pappas

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

.vwrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column; }
  .vwrapper #row1 {
    background-color: red; }
  .vwrapper #row2 {
    background-color: blue; }
  .vwrapper #row3 {
    background-color: green;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .vwrapper #row3 #col1 {
      background-color: yellow;
      -webkit-box-flex: 0 0 240px;
      -moz-box-flex: 0 0 240px;
      -webkit-flex: 0 0 240px;
      -ms-flex: 0 0 240px;
      flex: 0 0 240px; }
    .vwrapper #row3 #col2 {
      background-color: orange;
      -webkit-box-flex: 1 1;
      -moz-box-flex: 1 1;
      -webkit-flex: 1 1;
      -ms-flex: 1 1;
      flex: 1 1; }
    .vwrapper #row3 #col3 {
      background-color: purple;
      -webkit-box-flex: 0 0 240px;
      -moz-box-flex: 0 0 240px;
      -webkit-flex: 0 0 240px;
      -ms-flex: 0 0 240px;
      flex: 0 0 240px; }