JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 200px; height: 200px;">
    <table style="height: 100%; border: 1px solid blue;">
        <tr>
            <td style="height: 1px; background: green; border: 1px solid magenta;">
                Variable Number<br/>
                Of Lines<br/>
                All should be visible<br/>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid magenta;">
                <div id="subject" style="height: 100%; background: red; overflow-x: hidden; overflow-y: auto">
                    Variable<br/>
                    Number<br/>
                    Of Lines<br/>
                    Overflowing <br/>
                    lines<br/>
                    Can be scrolled<br/>
                    ...<br/>
                    Variable<br/>
                    Number<br/>
                    Of Lines<br/>
                    Overflowing <br/>
                    lines<br/>
                    Can be scrolled<br/>
                    ...<br/>
                </div>
            </td>
        </tr>
    </table>
</div>