title: Vertical-align two inline-block elements
body: <p>I have two inline-block div elements that I'd like to vertically align. They both contain different amounts of text, but the smaller one just aligns at the bottom.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div class="work-item"&gt;
      &lt;div class="image-container"&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="text-container"&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.work-item {
      width: 100%;
      padding: 50px 0;
  }
  
      .work-item .image-container, .work-item .text-container {
          display: inline-block;
      }
  
      .work-item .image-container {
          width: 33%;
      }
  
      .work-item .text-container {
          width: 60%;
      }
  
      .work-item .text-container p {
          margin: 0;
      }
  </code></pre>
  
  <p>You can see a JSFiddle here: <a href="http://jsfiddle.net/jedhep7x/" rel="noreferrer">http://jsfiddle.net/jedhep7x/</a></p>
  
  <p>I've tried setting the div height to 100% and setting the vertical-align to middle, but that doesn't fix it at all.</p>
  
  <p>Anyone know what I'm doing wrong here?</p>