title: Fixed height inline-block divs
body: <p>This is my css</p>
  
  <pre><code>.f0{display: inline-block; padding: 5px;margin: 5px;height: auto;box-sizing: border-box}
  </code></pre>
  
  <p>and this is my html</p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="f0" style="width:33%"&gt;1 line of data&lt;/div&gt;
  &lt;div class="f0" style="width:33%"&gt;2lines of data&lt;br/&gt;I love foo&lt;/div&gt;
  &lt;div class="f0" style="width:33%"&gt;3lines of data&lt;br/&gt;Love Bar too&lt;br/&gt;coffee too&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It will be rendered something like below (different height), I also expected to have all of them in one line, <strong>but sometimes the 3rd. div goes to the next line</strong>.</p>
  
  <pre><code>+--------------+  +--------------+  +--------------+
  |1 line of data|  |2lines of data|  |3lines of data|
  +--------------+  |I love foo    |  |Love Bar too  |
                    +--------------+  |coffee too    |
                                      +--------------+
  </code></pre>
  
  <p>but I like table like output like this</p>
  
  <pre><code>+--------------+  +--------------+  +--------------+
  |1 line of data|  |2lines of data|  |3lines of data|
  |              |  |I love foo    |  |Love Bar too  |
  |              |  |              |  |coffee too    |
  +--------------+  +--------------+  +--------------+
  </code></pre>
  
  <p>Now how may I fix this? <code>height:100%</code> doesn't work too.<br/><br/>
  <strong>The main problem:</strong><br/>
  I'm not insisting to fix the issue with this approach(but prefer), I also tried <code>display:table-cell</code> and its related stuffs and everything is working very well except ie6 and ie7, so the expected output is desired with any approach using divs(without any js).<br/></p>