JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table1">
    <tr>
        <td class="fixed">
            Fixed height row
        </td>
    </tr>
    <tr>
        <td>
            <table class="table2"> 
                <tr>
                    <td>
                        Content
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

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

td
{
    height:100%;
}

.table1 {
    background-color:salmon;
    width:100%;
    height:100%;
}

.fixed {
    background-color:lightgreen;
    height:30px;
}

.table2 {
    background-color:steelblue;
    width:100%;
    height:90%;
}