JSFiddle - React, Tailwind, and code Playground

by neoswf

HTML

<section>
    <h2>Inline blocks:</h2>
    <ul class="inline_blocks">
        <li>a</li>
        <li>b<br>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</section>

<section>
    <h2>Inline blocks w/ vertical-align:top:</h2>
    <ul class="inline_blocks vertical_align_top">
        <li>a</li>
        <li>b<br>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</section>

<section>
    <h2>Inline blocks without whitespaces:</h2>
    <ul class="inline_blocks">
        <li>a</li><li>b<br>b</li><li>c</li><li>d</li>
    </ul>
</section>

<section>
    <h2>Floats:</h2>
    <ul class="floats">
        <li>a</li>
        <li>b<br>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</section>

CSS

body { font-family:sans-serif; color:#fff;}
h2 { color:#000; font-weight:bold; margin-bottom:10px; }

section { margin:20px; padding:10px; background:#ddd; overflow:hidden; }
ul li { background:#21a3ca; border:2px solid black; padding:2px; }
.inline_blocks{
   word-spacing:-5px;        
}

.inline_blocks li { display:inline-block; word-spacing:normal}

.inline_blocks.vertical_align_top li { vertical-align:top; }

.floats li { float:left; }