JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>
</div>

CSS

div { width:300px; }
ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }