JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="left">
        <ul>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
        </ul>
    </div>
</div>
<div class="wrap">
    <div class="left">
        <ul>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li>Lorem</li>
            <li>Lorem</li>
            
        </ul>
    </div>
</div>

CSS

.wrap{
    overflow: hidden;
    position: relative;
    margin: 0 0 20px;
}
.left{
    float: left;
    width: 100px;
    background: #f00;
}
.right{
    position: absolute;
    top: 0;
    left: 110px;
    right: 0;
    bottom: 0;
    background: #ff0;
}
ul{
    margin: 0;
}