title: Set the same height for two div in CSS
body: <p>I'm trying to align two div on the same line. No problem for that, but now I'm looking for a solution to have the same height on each div, the problem is that the first one contain only an icon and the second contain text that will probably take more space than the icon. I'm looking for a css property than can help me to do this...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.zone-info {
      background-color: #e0f1f5;
      line-height: 1.363em;
      margin-bottom: 3px;
      padding: 5px 0;
  }
  
  .zi-icon {
      display: inline-block;
      float: left;
      text-align: center;
      vertical-align: center;
      height: 100%;
      width: 10%;
  }
  
  .zi-text {
      width: 90%;
      display: inline-block;
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="zi-icon zone-info"&gt;icone&lt;/div&gt;
  &lt;div class="zi-text zone-info"&gt;Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.&lt;br&gt;
      # Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.&lt;br&gt;
      # Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.&lt;/br&gt;
      # Sed ut perspiciatis unde omnis iste natus error sit. 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a Jsfiddle of what I do for the moment.
  <a href="http://jsfiddle.net/nc6L227z/" rel="nofollow">http://jsfiddle.net/nc6L227z/</a></p>