JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="first">
        <table>
            <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 {
    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;
}