JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="header"> text <br> text <br> text </div>
    <div class="content"> text <br> text <br> text </div>
</div>

CSS

html, body, .container {
    height: 100%;
    
    margin: 0;
}

.container {
    display: table;
    
    width: 100%;
}

.header {
    display: table-row;
    
    height: 30%;
    
    background: #aaa;
}

.content {
    display: table-row;
    
    background: #ddd;
}