JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="vertical-list" id="table-header">
    <li>Id</li>
    <li>Name</li>
    <li>Address</li>
</ul>
<div class="vertical-list-container">
    <div class="scroll">   
        <ul class="vertical-list">
            <li>1</li>
            <li>John Doe</li>
            <li>123 Address Lane</li>
        </ul>
        <ul class="vertical-list">
            <li>2</li>
            <li>Jane Doe</li>
            <li>456 Another Road</li>
        </ul>
    </div>      
</div>

CSS

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#table-header {
    float: left;
    width: 33%;
}

.vertical-list-container {
    float: left;
    width: 66%;
    overflow-x: scroll; 
}

.scroll {
    width: 400px;  
    border-top: 1px solid red;
}

.vertical-list{
    float: left;
    width: 200px;
}