title: Vertical align inline-flex elements
body: <p>I am triying to vertical-align 3 different inline-flex elements in a same div, but the last one doesn't fit as expected.</p>
  
  <p><a href="http://jsfiddle.net/vUSmV/22/" rel="noreferrer">Here is a JSFiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="left"&gt;
          &lt;span&gt;2014/01/21&lt;/span&gt;
      &lt;/div&gt;&lt;div class="middle"&gt;
          &lt;button&gt;Hello&lt;/button&gt;
          &lt;button&gt;Bye&lt;/button&gt;
      &lt;/div&gt;&lt;div class="right"&gt;
          &lt;ul&gt;   
           &lt;li&gt;Chocolate&lt;/li&gt;
           &lt;li&gt;Caramel&lt;/li&gt;
           &lt;li&gt;Watermelon&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
     height: 100px;
     width: 100%;
     background-color: blue;
  }
  
  .container .left, .container .right {
      height: 100%;
      width: 30%;
  }
  
  .container .middle {
      height: 100%;
      width: 40%;
  }
  
  .container .left, .container .middle {
      display: -webkit-inline-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: -moz-inline-flex;
      -moz-justify-content: center;
      -moz-align-items: center;
  }
  
  .container .right {
    display: -webkit-inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -webkit-box-pack: center;
    -webkit-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-flex-align: center;
    -webkit-align-items: center;
    display: -moz-inline-flex;
    -moz-justify-content: center;
    -moz-align-items: center;
    -moz-flex-direction: column;
  }
  
  .container .right ul {
      padding: 0;
      margin: 0;
  }
  </code></pre>