Vertical aligning text in Foundation nav bar

Question

I am trying to get top-bar nav menu that contains an 280 x 70 image on the left bottom align the menu choices on the right. I can right and left align text in Foundation but I can't find a way to vertical align.

Example Fiddle

<div class="row full-width">
<div class="large-4 columns">
    <img src="MyLogo.png" width="280" height="70" alt="My 280 x 70 Logo" />
</div>
<div class="large-8 columns">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <div class="logo"> <a href="#"></a>
                </div>
            </li>
            <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a>
            </li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active"> <a href="/home/index" class="menuMix">
                            <span class="menuMinor">Home Page</span>
                            <span class="menuMain allCaps">Home</span>
                        </a>
                </li>
                <li class=""> <a href="/home/about" class="menuMix">
                            <span class="menuMinor">Who We Are</span>
                            <span class="menuMain allCaps">About</span>
                        </a>
                </li>
                <li class=""> <a href="/home/contact" class="menuMix">
                            <span class="menuMinor">Get In Touch</span>
                            <span class="menuMain allCaps">Contact</span>
                        </a>
                </li>
            </ul>
        </section>
    </nav>
</div>

Answer 1

The easiest way is to use flexbox.

.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}