JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div id="first">
    <span> text </span>
    <span> text </span>
    <span> text </span>
</div>
<br>
<div id="second">
    <span> text </span>
    <span> text </span>
    <span> text </span>
</div>
<div id="third">
    <span> text </span>
    <span> text </span>
    <span> text </span>
</div>

CSS

#first span{
    display:block;
    background:red;
    text-align:center;
    width:100px;
}
#second span{
    display:inline;
    background:green;
    text-align:center;
    width:100px;
}
#third span{
    display:inline-block;
    background:grey;
    text-align:center;
    width:100px;
}