JSFiddle - React, Tailwind, and code Playground

by elclanrs

HTML

<!-- how come single line spans show incorrectly (loses trailing or leading spaces) -->
<p class="titlor">single line span example:</p>
<p class="example">
    <span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>
<p class="descriptor">trailing space of first `span` is lost, and so is the leading of last `span`</p>

<!-- where multi line, works as expected (shows spaces where they should be) -->
<p class="titlor">multi line span example:</p>
<p class="example">
    <span class="item">Lorem Ipsum is simply dummy text </span>
    <span class="item">of the printing and typesetting</span>
    <span class="item"> industry.</span>
</p>
<p class="descriptor">everything is fine, but how come this solves it?</p>

CSS

body {
    padding: 10px;
}

p.titlor{
    color: lightgrey;
}

p.example {
    padding: 5px;
}

p.descriptor {
    background-color: lightblue;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 30px;
}

/* what causes the bug */
span.item {
    display: inline;
}