JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
            <p>Hi<br/>
            This text should be of variable height..
            <br/>
            More content should simply 'steal' it from the red container below.
            </p>
</div>
<div id="red">
First row <br/><br/>

    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    One row..<br/>
    <br/>
    Something
</div>

CSS

*{
            margin:0;
            padding:0;
        }
        html,
        body {
            height:100%;
            width:100%;
            overflow:hidden;
        }
#header, #red{position:absolute;}
        #header {
            border-bottom:1px solid #000;
           background:yellow
        top:0px;
    height:80px;
    width:100%;
    left:0px;
    right:0px;
        }
        
        #red {
            bottom:0px;
    top:80px;
    left:0px;
    right:0px;

            background-color: red;
            overflow: auto;
        }