JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div class="main">
                <div class="d1">
                    some content <br/>
                </div>
                <div class="d2">
                    this should fill the rest
                </div>
            </div>
        </td>
        <td>
            <div class="main">
                <div class="d1">
                    some content <br/>
                    more content<br/>
                    even more content<br/>
                </div>
                <div class="d2">
                    this should fill the rest
                </div>
            </div>
        </td>
    <tr>

CSS

.main {
    font: 30px Verdana;
    width: 300px;
    height: 300px;
    background: grey;
}

.d1 {
    background: lime;
    max-height: 95px;
    overflow: scroll;
}

.d2 {
    background: yellow;
}