JSFiddle - React, Tailwind, and code Playground

HTML

<p><span>With HTML/CSS, *everything* is laid out using a box.</span> <br><br><span>This is a &lt;span>.  It has a border around it, so you can see how your browser positions it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...  This is a &lt;span>.  It has a border around it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...  This is a &lt;span>.  It has a border around it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...  This is a &lt;span>.  It has a border around it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...</span></p>

CSS

p{ margin: 2em; }
span{ border: 1px dotted gray; line-height: 150%; padding: 3px; }