JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-wrapper">
  <div id="header">
    #header
  </div>
  <div id="main-column-wrapper">
    <div id="side-column">
      #side-column
    </div>
    <div id="main-column">
      <div id="widget1">
        <h1>widget 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      </div>
      <div id="widget2">
        <h1>widget 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      </div>
    </div>
  </div>
</div>

CSS

div {
  box-shadow: inset 0 0 0 1px rgba(30,100,200,0.5);
  padding: 10px;
  font-family: arial;
}
h1, p {
  margin: 0;
}
#main-wrapper {
  height: 400px;
  display: flex;
  flex-direction: column;
}
#header {
  flex-shrink: 0;
  height: 2em;
}
#main-column-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
}
#side-column {
  width: 20%;
  flex-shrink: 0;
}
#main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#widget1, #widget2 {
  flex: 1;
  flex-shrink: 0;
  overflow: auto;
}