title: Align divs wth different height on top
body: <p>This is my HTML markup:</p>
  
  <pre><code>&lt;div class="awards-wrap"&gt;
      &lt;div class="award"&gt;
          &lt;img src="http://placehold.it/200x200"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor&lt;/p&gt;
          &lt;p&gt;Lorem ipsum 2013&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="award"&gt;
          &lt;img src="http://placehold.it/200x200"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="award"&gt;
          &lt;img src="http://placehold.it/200x200"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor&lt;/p&gt;
          &lt;p&gt;Lorem ipsum 2013&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css:</p>
  
  <pre><code>.awards-wrap {
      background: gray;
      margin: 0 auto;
      text-align: center;
  }
  
  .award {
      max-width: 250px;
      display: inline-block;
  }
  </code></pre>
  
  <p>So they're all aligned now in center and is also responsive, but I want the images to all be aligned on top.</p>
  
  <p>I've tried to do it this way:</p>
  
  <pre><code>.awards-wrap {
      background: gray;
      margin: 0 auto;
      text-align: center;
      display: table;
  }
  
  .award {
      max-width: 250px;
      display: table-cell;
  }
  </code></pre>
  
  <p>But it removes the responsiveness and being aligned on the center. I know I can use media queries for it and all but I would like to do it simply like its behavior on <code>inline-block</code>.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/gnhpfgu4/1/" rel="nofollow">jsfiddle</a> for it</p>