JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float">
    <p>float: </p>
    <p>These two paragraphs generates inline boxes, and it results in</p>
    <p>no distance between the two elements.</p>
</div>

<hr style="margin:50px 0;"/>

<div class="inline">
    <p>inline: </p>
    <p>These two paragraphs generates inline boxes, and it results in</p>
    <p>no distance between the two elements.</p>
</div>

CSS

div {
    padding: 10px;
    background: #cc0;
}
p {
    display: inline;
    margin-right: 10px;
    color: #fff;
}
div.float p {
    background: #c00;
    float: left;
}
div.inline p {
    background: #090;
}