JSFiddle - React, Tailwind, and code Playground

HTML

<header>header</header>
    <div id='main'>
      <article>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      </article>
      <aside>aside</aside>
    </div>

CSS

body {
        font: 24px Helvetica;
        background: #999999;
        display:flex;
        flex-flow: column;
    }
html, body {
  height:100%;
  margin:0;
}
    #main {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
        flex:1;
        background-color: red;
    }

    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        background: #ccccff;
        flex: 1 6 20%;
        order: 1;
    }
    
    header {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }