JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="header">Header</div>
    <div class="contentRow">
        <div class="contentTable">
            <div class="leftCol">Sidebar</div>
            <div class="rightCol">
                <div class="rightTable">
                    <div class="topContent">Top content</div>
                    <div class="content">Content</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.outer {
    display: table;
    height: 100%;
    width: 100%;
}
.header {
    background: blue;
    display: table-row;
    height: 30px;
}
.contentRow {
    display: table-row;
}
.contentTable {
    display: table;
    width: 100%;
    height: 100%;
}
.leftCol {
    background: red;
    display: table-cell;
    width: 280px;
    min-width: 280px;
    height: 100%;
}
.rightCol {
    display: table-cell;
    height: 100%;
}
.rightTable {
    display: table;
    width: 100%;
    height: 100%;
}
.topContent {
    background: green;
    display: table-row;
    height: 100px;
}
.content {
    background: orange;
    display: table-row;
}