title: fit div width to content and not to parent
body: <p>I want to make a label for a button that I have. My problem is that the label is wider then the button. I currently have it done like this (simple example):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="parent_container_the_icon"&gt;
      &lt;div class="label"&gt;
          This is the label text
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.parent_container_the_icon {
      height: 50px;
      width: 50px;
      float: left;
  }
  
  .label {
      display: block;
      position: absolute;
      white-space: nowrap;
  }
  </code></pre>
  
  <p>What I want is for the label to take the width of the label text itself without wrapping the text. At the moment it doesn't wrap the text, but I get an overflow of the text in the label box as that box only takes the maximum width of the container.</p>
  
  <p>How can I force the label <code>div</code> to fit the size of the text and not inherit the width of the parent?</p>