title: CSS - Setting the width of a span in % with respect to its maximum width
body: <p>I have two divs containing text stacked over eachother. The bottom text is in grey and the top one in red. I'd like to be able to specify the % of the portion of my top red div that I want to display with CSS. When using <code>width: x%</code>, the % of the top div displayed is with respect to the whole line and not the content(text). I'd like to know the CSS fix needed to accomplish what I want.</p>
  
  <p><a href="http://jsfiddle.net/8oodus0n/" rel="nofollow">http://jsfiddle.net/8oodus0n/</a></p>
  
  <pre><code>&lt;div class="text-container"&gt;
      &lt;span class="text-grey"&gt;
          We love Stack Overflow
      &lt;/span&gt;
      &lt;span class="text-color"&gt;
          We love Stack Overflow
      &lt;/span&gt;
  &lt;/div&gt; 
  
  .text-grey, .text-color{
      position: absolute;
      font-size: 18px;
      font-family: arial;
      font-weight: 800;
  }
  
  .text-grey{
      color: grey;
  }
  
  .text-color{
      color: red;
      overflow-x: hidden;
      width: 20%;
      white-space:nowrap;
  }    
  </code></pre>