JSFiddle - React, Tailwind, and code Playground

HTML

<table  class="col">
    <tr>
        <td  class="head">
            <div class="top1">bla1</div>
            <div class="top2">bla1</div>            
        </td>
    </tr>
    <tr>
        <td  class="bottom">
            <div class="bottom">
                
                <ul class="list">
                    <li>bla2</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                    <li>bla</li>
                </ul>
            </div>
        </td>
    </tr>
</table>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.col {
    width: 200px;
    height: 100%;
    border: 1px solid gray;
    box-sizing: border-box;
}
td{position:relative}
.head {
    background: #999;
    border: 1px solid;
    box-sizing: border-box;   
}
td.bottom{
    height:100%;    
    
}
div.bottom {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow: scroll;

}
.list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list > li {
    display: block;
}