title: Span in h2 tag. Auto adjust width
body: <p>Here is the HTML part:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;Some text&lt;span&gt;&lt;/span&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS for the elements:</p>
  
  <pre><code>.container {
  width: 533px;
  }
  
  .container h2 {
  color: #ec1c24;
  font-size: 48px;
  text-transform: uppercase;
  font-family: "Open Sans Extrabold";
  letter-spacing: -3px;
  }
  
  .container h2 span {
  background: none repeat scroll 0 0 #ec1c24;
  float: right;
  height: 34px;
  margin-top: 16px;
  width: 38%;
  }
  </code></pre>
  
  <p>What I'm trying to do is to make the span adjust it's size to the text lenght. With this CSS if the text is too long, the span goes below but it should just shrink.</p>
  
  <p>Here's an example:</p>
  
  <p><a href="http://jsfiddle.net/SCj5Z/" rel="nofollow">http://jsfiddle.net/SCj5Z/</a></p>