title: Resize <div> automatically based on text?
body: <p>I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
  <a href="http://jsfiddle.net/sVKU8/2/" rel="noreferrer">http://jsfiddle.net/sVKU8/2/</a></p>
  
  <p>1) I assume this first part is easy - Is there a way to update the parent <code>label</code> class to automatically have it's <code>width</code> set based on the total width of the two child <code>&lt;div&gt;</code>s so the border only wraps around the green and red <code>&lt;div&gt;</code>s? I thought setting <code>width: auto</code> was supposed to do that, but my CSS skills are apparently lacking.</p>
  
  <p>2) What I'd like to accomplish next would be to remove the <code>width</code> attribute from my <code>label-text</code> class and have the width set (or grow automatically, if possible) whenever I apply text to that <code>&lt;div&gt;</code> via JavaScript without text wrapping (i.e. keeping the original height of the <code>label</code> class).</p>
  
  <p>I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.</p>
  
  <p>Any input or suggestions would be greatly appreciated!</p>