title: chrome overlaying dynamically generated content in spans
body: <p>i have a magento product page where the products with variable (configurable) prices change the price displayed above and changes the label text. so when you load it gives you
  "from: " $lowestprice
  and then when you pick a different option in the select it changes to that price above and removes the "from: " text from within the span.
  if you then go back to the "pick an option" in the select the "from: " reappears.</p>
  
  <p>the key is that in firefox when the "from:" is removed the price moves to the left (everything is left aligned) so that there isnt a big white space where the "from: " was...</p>
  
  <p>in chrome when you go back to the default pick option the price overlays the "from: " (see pic)</p>
  
  <p>this is the html</p>
  
  <pre><code> &lt;div class="mainprice"&gt;
     &lt;div class="price-box"&gt;
         &lt;span id="configurable-price-from-1552" class="label"&gt;
             &lt;span class="configurable-price-from-label"&gt;From: &lt;/span&gt;
         &lt;/span&gt;
         &lt;span id="product-price-1552" class="regular-price"&gt;
              &lt;span class="price"&gt;$26.50&lt;/span&gt;
         &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if i set a width to the label span then when the javascript removes the "from: " it looks like the price has a large left margin. i have also tried setting it as a table layout but the cell wont collapse when empty.</p>
  
  <p><img src="https://i.stack.imgur.com/A24DV.jpg" alt="image of price overlaying from line"></p>
  
  <p>I really dont want to start hacking in the javascript or changing the layout of the html. my question is, is there a way to do this with css and make chrome behave the way firefox does, where it is working perfectly with just the spans. i have seen this problem with chrome before with table cells overlapping when a width wasnt specified.</p>