Vertical align a column in foundation 5

Question

in the following foundation 5 snippet, second column is aligned to the top.

    <div class="row">
       <div class="small-6 columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
       <div class="small-6 columns">center me</div>
    </div>

codepen: https://codepen.io/anon/pen/goXyLZ?editors=1000

I need something like this https://codepen.io/ZURBFoundation/pen/BRrYQy?editors=1000 where column is aligned to middle.

But align-middle class is not working in foundation 5. Is there any simple way to implement in foundation 5.

Answer 1

You could add the following Class to your Styles:

.align-middle {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
 }

And then you can assign the Class to the parent Container e.g .row. Heres your Demo: https://codepen.io/anon/pen/VyyYaQ?editors=1100