title: Setting html elements to null or whitespace is causing field displacement
body: <p>Using Bootstrap 4 and jQuery to update my HTML paragraphs.  </p>
  
  <pre><code>$("#product-unit-price").html(UnitPrice);
  </code></pre>
  
  <p><a href="https://codepen.io/kbrfuller/pen/gOYqrKO" rel="nofollow noreferrer">Here's a CodePen</a>. I have purposely set my second field to <code>""</code>. The 3rd and 4th fields on the screen are displaced (moved up) because of the 2nd field being <code>""</code>.  </p>
  
  <p>To resolve the displacement, I now set the UnitPrice to <code>"&amp;*nbsp;"</code> (<code>*</code> added for display purpose)</p>
  
  <p>This eliminates the displacement issue, but I would still like to know the reason for the displacement in the first place and why I can't I assign <code>UnitPrice</code> to <code>""</code> or <code>" "</code>?</p>