JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="_1">
        <table border="" id="table1">
            <tr>
                <td>Heading 1</td>
                <td>Heading 2</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
    <div id="_2">
        <table border="" id="table2">
            <tr>
                <td>Section Header</td>
            </tr>
            <tr>
                <td>Row 1</td>
            </tr>
            <tr>
                <td>Row 2</td>
            </tr>
            <tr>
                <td>Row 3</td>
            </tr>
            <tr>
                <td>Row 4</td>
            </tr>
            <tr>
                <td>Row 5</td>
            </tr>
            <tr>
                <td>Row 6</td>
            </tr>
            <tr>
                <td>Row 7</td>
            </tr>
            <tr>
                <td>Row 8</td>
            </tr>
            <tr>
                <td>Row 9</td>
            </tr>
            <tr>
                <td>Row 10</td>
   ...

CSS

#container {
    height:440px;
    border:1px solid red;
}
div#_1 {
    border:1px solid black;
    max-height:175px;
    margin-bottom:15px   
}

div#_2 {
    border:1px solid black;
    overflow:auto;
}

#table1, #table2 {
    width:100%;   
}

JavaScript

var t2_maxH = $("#container").height() - $("#_1").height() - 19;
/* 
Where did 19 come from you ask?

div _1's margin-bottom of 15px +
div _1's top border of 1px +
div _1's bottom border of 1px +
div _2's top border of 1px +
div _2's bottom border of 1px = 19px
*/

$("#_2").css("max-height", t2_maxH);