JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<div class="main-container">
  <div class="left-container">Left container</div>
  <div class="right-container">
    <div class="half-containers">
      <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="half-containers">Bottom right</div>
  </div>
</div>

CSS

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

div {
  border: 0.5px solid white;
}

.main-container {
  height: 100%;
  display: flex;
  box-sizing: border-box;

}

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

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

.half-containers {
  flex: 1;
  overflow: auto;
}