JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Cool stuff with flexbox.<br>
<div class="main-container">
  <div class="left-container withborder">Left container</div>
  <div class="right-container">
    <div class="split-container withborder">
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
    </div>
    <div class="split-container withborder">Bottom right
    <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
    <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
    </div>
    <div class="split-container withborder">
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      <p>Top right</p>
      </div>
  </div>
</div>

CSS

html,body {
  margin: 0;
  height: 100%;
}

div {
  box-sizing: border-box;
}

.withborder {border: 1px solid grey;
  padding:5px;margin:5px;border-radius:5px;}

.main-container {
  height: 500px;
  display: flex;
}

.left-container {
  flex: 1 1 0;
}

.right-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.split-container {
  flex: 1;
  overflow: auto;
}