JSFiddle - React, Tailwind, and code Playground

by JamesD

HTML

<ul id="float">
    <li>One</li>
    <li>Two</li>
</ul>
<div style="clear:both"></div>
<hr>
    
<ul id="inline">
    <li>One</li>
    <li>Two</li>
</ul>

<hr>
    
<ul id="inline-block">
    <li>One</li>
    <li>Two</li>
</ul>

<hr>
    
<ul id="table">
    <li>One</li>
    <li>Two</li>
</ul>

CSS

li { list-style-type:none; padding:2px 5px; }

ul#float li { float:left; }

ul#inline li { display:inline; }

ul#inline-block li { display:inline-block; }

ul#table { display:table; }
ul#table li { display:table-cell; }