JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="i">
    <li>1111</li>
    <li>2<b>22</b>2</li>
    <li>3333</li>
</ul>

<ul class="i-b">
    <li>1111</li>
    <li>2<b>22</b>2</li>
    <li>3333</li>
</ul>

CSS

ul { margin: 20px; }

li { margin: 5px; border: 1px solid #ccc; }

.i li { display: inline }
.i-b li { display: inline-block }

b { display: block; }