JSFiddle - React, Tailwind, and code Playground

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>

<!-- and with &nbsp;'s it also works -->
<p class="titlor">&amp;nbsp; entity example:</p>
<p class="example">
    <span class="item">Lorem Ipsum is simply dummy text&nbsp;</span><span class="item">of the printing and typesetting</span><span class="item">&nbsp;industry.</span>
</p>
<p class="descriptor">beautiful, hence the .html() option</p>

CSS

/* fix */
span.item {
    white-space: pre-wrap;
}

/* original... */
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-block;
}