JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div style="height: 200px">
  <div style="display: flex; flex: 1">
    <div style="width: 40%; display: flex; flex-direction: column; min-height: 0">
      <div style="display: flex; flex-direction: column; min-height: 0">
        <div style="display: flex; flex-direction: column; min-height: 0">
          <div>
            Header
          </div>
          <div style="overflow-y: scroll">
            Body<br />
            Body<br />
            Body<br />
            Body<br />
            Body<br />
            Body<br />
            Body<br />
            Body<br />
            Body<br />
          </div>
          <div>
            Foobar
          </div>
        </div>
      </div>

    </div>
    <div style="width: 60%">
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
      Right<br />
    </div>
  </div>
</div>

CSS

div {
  border: 1px dashed red;
}