title: How to vertically align spans with text and image
body: <p>I have now been looking for hours (obviously not in the right place!)</p>
  
  <p>Please consider this sample: <a href="http://jsfiddle.net/DYLs4/9/" rel="noreferrer">http://jsfiddle.net/DYLs4/9/</a></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;span id="text24"&gt;Text 24&lt;/span&gt;
      &lt;span id="text12"&gt;Text 12&lt;/span&gt;
      &lt;span id="icon"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#text24{
      font-size:24px; color:#999;   
  }
  #text12{
      font-size:12px; color:#000;  
  }
  #icon{
      height:36px; width:36px;
      display:inline-block;
      background:url(some-icon.png);
  }​
  </code></pre>
  
  <p>​
  <img src="https://i.stack.imgur.com/pQpAd.png" alt="Result"></p>
  
  <p>What I'm trying to achieve is this:</p>
  
  <ul>
  <li>Center vertically the text24 (relative to the image)</li>
  <li>Align the bottom of text12 with bottom of text24</li>
  <li>Make sure the whole thing work in IE6 -> chrome</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/diJOa.png" alt="Goal"></p>
  
  <p>Many thanks for your help!</p>