title: automatic span width
body: <p>I have following HTML for a heading. The <code>.left</code> and <code>.right</code> are empty spans. I have specific width for the .left and but the <code>.text</code> width is not always same. I want to set the background for the .left (fixed width) and the <code>.right</code>. The <code>.right</code> should get all the remaining space in the parent element (h1). How that can be done?</p>
  
  <pre><code>&lt;h1&gt;
      &lt;span class="left"&gt;&lt;/span&gt;
      &lt;span class="text"&gt;Text&lt;/span&gt;
      &lt;span class="right"&gt;&lt;/span&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>I'm trying following CSS which does not work:</p>
  
  <pre><code>.left{
      background: yellow;
      width: 30px;
      height: 20px;
      display: inline-block;
  }
  
  .right{
      display: inline-block;
      background: blue;   
  }
  </code></pre>
  
  <p>Here's the JSFiddle link: 
  <a href="http://jsfiddle.net/jMR8u/" rel="nofollow noreferrer">http://jsfiddle.net/jMR8u/</a></p>
  
  <p>Here's what I'm trying to get:<img src="https://i.stack.imgur.com/VRti6.png" alt="enter image description here"></p>
  
  <p>The idea is to set a background image in h1 except the <code>.text</code> span and the problem is that I can not set the background for the .text, otherwise it would be easier.</p>