JSFiddle - React, Tailwind, and code Playground

HTML

<p>logo</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>

CSS

p { width: 100px; height: 50px; background: pink; position: absolute; top: 25px; left: 200px; }
ul { width: 500px; }
li:nth-child(odd) { text-align: right; }
li { width: 250px; float: left; background: lightblue; height: 25px; }
li:nth-child(3), li:nth-child(5) { width: 200px; margin-right: 50px; }
li:nth-child(4), li:nth-child(6) { width: 200px; margin-left: 50px; }