JSFiddle - React, Tailwind, and code Playground

HTML

<p>What it looks like:</p>
<div id="myDiv">
    <span id="mySpan">Here is some text. Why does a wrapped word create space where the word would have been on the previous line?</span>
</div>

<p>What I want it to look like:</p>
<div id="myDiv2">
    <span>Here is some text. Why does a wrapped word create space where the word would have been on the previous line?</span>
</div>

CSS

#myDiv {
    background-color: red;
    display: inline-block;
    max-width: 410px;
}

#myDiv2 {
    background-color: red;
    display: inline-block;
    max-width: 375px;
}