JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul class="left">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
    </ul>
    <ul class="right">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

CSS

.left, .right {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
.left {
    float: left;
}
.right {
    float: right;
}

.left li {
    background-color: green;
}
.right li {
    background-color: blue;
}

@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}