JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="left">
        <li class="title">Title A</li>
        <li>1A</li>
    </ul>
    <ul  class="right">
        <li class="title">Title B</li>
        <li>1B</li>
        <li>2B</li>
        <li>3B</li>
    </ul>
    <ul class="left">
        <li class="title">Title C</li>
        <li>1C</li>
        <li>2C</li>
    </ul>

CSS

body { margin: 50px auto; width: 500px; }
    ul { 
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
    }
    li { 
        background: #ddd;
        list-style: none;
        margin: 1px 0;
        padding: 5px
    }
    li.title { background: #333; color: #fff; }
.left {float:left;}
.right {float:right;}