JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="left">
    <div id="top">test</div>
    <div id="nav">test</div>
    <div id="main">test</div>
    <div id="break"></div>
    <div id="notepad">test</div>
    <div id="chat">test</div>

  </div>
  <div id="right">test</div>



</body>

CSS

body {
  font-family: 'Open Sans', 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
  display: flex;
  flex-flow: row wrap;
}

#left {
  flex: 6 0%;
  display: flex;
  flex-flow: row wrap;
}

#right {
  flex: 1 0%;
  background-color: black;
}

#top {
  flex: 1 100%;
  background-color: red;
}

#nav {
  flex: 1 1px;
  background-color: green;
}

#main {
  flex: 6 0%;
  background-color: blue;
}

#notepad {
  flex: 1 1px;
  background-color: yellow;
}

#chat {
  flex: 6 0%;
  background-color: orange;
}

#break {
  flex: 1 100%;
}