JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="first">
        <table id="first_child">
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
             <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
    <div id="second">
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
</div>

CSS

#main {
    width:500px;
    overflow:hidden;
}
#first, #second, #first_child {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    float: left;
}
#first {
    border:1px solid red;
    float:left;
    width:100px;
    overflow:auto;
}
#second {
    border: 1px solid green;
    width:396px;
    float:left;
}
#first_child{
    border:1px solid blue;
    height:100%;
}

JavaScript

var second_height = $("#second").height();
var table_height = second_height;

$("#first_child").height(table_height);