Vertical align inline-flex elements

Question

I am trying to vertical-align 3 different inline-flex elements in a same div, but the last one doesn't fit as expected.

.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;
}

<div class="container">
    <div class="left">
        <span>2014/01/21</span>
    </div><div class="middle">
        <button>Hello</button>
        <button>Bye</button>
    </div><div class="right">
        <ul>   
         <li>Chocolate</li>
         <li>Caramel</li>
         <li>Watermelon</li>
        </ul>
    </div>
</div>

Answer 1

Just add vertical-align:top to .container .right :

.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;
  vertical-align: top;
}

JSFiddle