html - 異なるサイズのdivでボタンを水平方向に整列させる方法は?

Question

おそらくこの質問はすでに出されていると思いますが、英語は私の母国語ではなく、検索の問題を表現できません。また、これを Google で約 1 ～ 2 時間検索します。だから許してください。

これが私の問題です。

ご覧のとおり、名前の長さが異なるため、ボタンは水平方向に整列していません。

これが私のコードです。

<hr>
      <div class="row column text-center">
         <h2>Most Viewed Products</h2>
         <hr>
      </div>
      <div class="row small-up-2 medium-up-3 large-up-6">
        <% @mosts.each do |most| %>
            <div class="column">
              <%= image_tag most.avatar.url(:large), {:class => "thumbnail"} %>
              <h8><%= link_to most.name, book_path(most) %></h8>
              <p><%= number_to_currency(most.cost, unit:"") %> &#x20BA;</p>
              <%= link_to 'Buy now!', book_path(most), {:class => 'button small expanded hollow', :style => 'float:left;'} %>
            </div>
        <% end %>
      </div>

ご覧のとおり、バックエンドで RoR を使用しています。また、フロントエンドには Foundation 6 を使用しています。

div のサイズは絶対的なものではないため、margin は使用できません。私はいくつかのことを試しましたが、何もうまくいきません。