JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div>
    <ul>
        <li>Item A</li>
        <li>Item 1</li>
        <li>Item B</li>
        <li>Item 2</li>
        <li>Item C</li>
        <li>Item 3</li>
        <li>Item D</li>
        <li>Item 4</li>
    </ul>
</div>

CSS

li {
    list-style-type: none;
    width: 50%;
}

li:nth-child(odd) {
    float: left;
    background-color: #0f0;
}

li:nth-child(even) {
    float: right;
    background-color: #00f;
}

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