JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li><span class="left">Item A</span><span class="right">Item 1</span>

        </li>
        <li><span class="left">Item B</span><span class="right">Item 2</span>

        </li>
        <li><span class="left">Item C</span><span class="right">Item 3</span>

        </li>
        <li><span class="left">Item D</span><span class="right">Item 4</span>

        </li>
    </ul>
</div>

CSS

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

span{
    width: 50%;
}
.left {
    float: left;
    background:blue;
}
.right {
    float: right;
    background:Red;
}
@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
        display:blocK;
    }
}