JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <header></header>
    <main>
        <section class="half"></section>
        <section class="half"></section>
    </main>
</div>

CSS

* {
    margin: 0; padding: 0;
}
html, body, #container {
    height: 100%;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: calc(100% - 50px);
    background: green;
}
.half {
    height: 50%;
}
.half:first-child {
    background: blue;
}
.half:last-child {
    background: yellow;
}