JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>Tempor</li>
        <li>accusam</li>
        <li>labore</li>
        <li>sit</li>
        <li>diam</li>
        <li>aliquyam</li>
    </ul>
    <ul>
        <li>Consetetur</li>
        <li>sadipscing</li>
        <li>aliquyam</li>
        <li>voluptua</li>
    </ul>
</div>

CSS

div {
  display: flex;
}

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

ul li {
    border: solid 1px #afafaf;
    padding: 10px;
    display: inline-block;
}


@media screen and (max-width: 830px) {
    div {
        display: block;
    }
    ul {
        margin: 0;
    }
}