Zurb Foundation top bar with right section that wraps under first - zurb-foundation

Question

Similar to this post
A Top Bar with 2 navigation rows - Zurb Foundation 5
and this example
http://jsfiddle.net/Ty3ZT/6/
I would like to have a search form on the right side with a longer search box (the default is so small). As the screen size is smaller I'd like the second section containing the search form to wrap under the first section so that the top bar becomes twice in height.
Here is how I'd like it to end up:
This is as close as I've gotten it. (unsure why the search input is not the same height as the button, they are on my local install)
http://jsfiddle.net/Ty3ZT/18/
<div class="fixed">
<nav class="top-bar hide-for-small expand" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<!--first row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-dropdown"><a class="">Account</a>
<ul class="dropdown">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
</ul>
</section>
<!--second row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 columns">
<input type="text" placeholder="Search here">
</div>
<div class="large-4 columns">
Search
</div>
</li>
</ul>
</section>
</nav>
</div>
How can I achieve this? Whenever I get the second section to wrap the search form is all messed up. button no longer inline.