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;                    /* primary height */
    display: flex;
    flex-direction: column;
}

#header {
    flex-shrink: 0;
    height: 2em;
}

#main-column-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
	height: calc(100% - 2em - 20px);  /* primary height less header height less header padding */
}

#side-column {
    width: 20%;
    flex-shrink: 0;
}

#main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
	height: calc(100% - 40px);  /* main-column-wrapper height less padding */
}

#widget1,
#widget2 {
    flex: 1;
	flex-shrink: 0;
    overflow: auto;
}