Best practice when adding whitespace in JSX
<p>I understand how (and <a href="https://stackoverflow.com/questions/32686728/how-to-avoid-jsx-component-from-condensing-when-react-js-rendering-it">why</a>) to add a whitespace in JSX, but I am wondering what's best practice or if any makes any real difference?</p>

<p><strong>Wrap both elements in a span</strong></p>

<pre><code>&lt;div className="top-element-formatting"&gt;
  &lt;span&gt;Hello &lt;/span&gt;
  &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Add them on one line</strong></p>

<pre><code>  &lt;div className="top-element-formatting"&gt;
    Hello &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>Add space with JS</strong></p>

<pre><code>&lt;div className="top-element-formatting"&gt;
    Hello {" "}
    &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt;
&lt;/div&gt;
</code></pre>