JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="left">
        <ul>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
            <li>Long list item</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>

CSS

ul {
    background: #eee;
}

.container:after {
    display: table;
    content: '';
    clear: both;
}

.left {
    float: left;
    width: 29%;
}

.right {
    float: right;
    width: 59%;
}

    .right ul {
        display: inline-block;
        width: 30%;
        vertical-align: top;
    }