JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div class="mid-body">Line 1 50% of window height - 64px of menu</div>

<div class="mid-body">Line 2 50% of window height - 64px of menu</div>

CSS

body, html {
    height: 100% !important;
}

body {
    margin: 4% 0px 0px 0px;
}

.mid-body {
    box-sizing: border-box;
    height: 48% !important;
    width: 100%;
    border: 1px solid #000;
}