html - Flexbox - 垂直方向に中央揃えしてサイズを合わせる

Question

フレックスを使用して2つのボタンを隣り合わせに配置し、それらのコンテンツを垂直方向に中央に配置しました。これはこれまでのところうまく機能しています. ただし、サイトをモバイル ページで表示すると (レスポンシブ デザインを使用してページを拡大)、テキストが少ない 2 番目のボタンがコンパニオンとは異なるサイズになります。

したがって、目標は、ボタンのテキストを垂直方向に揃えることと、2 つのボタンのサイズを常に一致させることです。

<section class="buttonsSection">
    <a class="button" href="#">Very Long Word</a>
    <a class="button" href="#">Short Phrase</a>
</section>

.button {
    padding: 20px 10px;
    width: 150px;
    background-color: deepskyblue;
    color: white;  
    margin: 3px;
   text-align: center;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body
{
    width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
    margin: 0 auto;
}

JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/ 問題がすぐにわからない場合は、結果ウィンドウの幅を狭めてみてください。