title: <li> will not take 100% height of the parent <ul>
body: <p>I have a <code>&lt;ul&gt;</code> with several <code>&lt;li&gt;</code> items in it all in a single row. The <code>&lt;li&gt;</code> has a nested <code>&lt;span&gt;</code> and an <code>&lt;img&gt;</code>. The <code>&lt;img&gt;</code> height is all the same across all items. But the <code>&lt;span&gt;</code> items contain text which can span on a single line or two lines (depends on text). </p>
  
  <p>I have tried appying <code>display:block</code>, <code>float:left</code>, <code>height:100%</code>, and few other suggestions I found, but the shorter <code>&lt;li&gt;</code> items will not take the same height as the taller <code>&lt;li&gt;</code> items. So I am left with a space below the shorter <code>&lt;li&gt;</code> items. 
  Anyone has any suggestions on this?</p>