JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="header">
            <p>Hi<br/>
            This text should be of variable height..
            <br/>
            More content should simply 'steal' it from the red container below.
            </p>
        </td>
    </tr>
    <tr>
        <td class="content">
<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>
        </td>
    </tr>
</table>

CSS

*{
            margin:0;
            padding:0;
        }
        html,
        body {
            height:100%;
            width:100%;
            overflow:hidden;
        }
        table {
            height:100%;
            width:100%;
            table-layout:static;
            border-collapse:collapse;
        }
        
        #red {
            height:100%;
            width:100%;
            background-color: red;
            overflow: auto;
        }

        .header {
            border-bottom:1px solid #000;
        }
        .content {
            height:100%;
        }