autosizing form w/ attached button in the navbar

Question

I've been trying to do this a bunch of different ways. I'm using foundation 6 and although I have been unable to locate the responsible css value it seems that the top-bar class is preventing me from using foundations columns correctly.

The nav is almost how I want it, I just want a the searchbox to autosize itself, without pushing the elements on the right side down.

heres a codepen which includes a bunch of other stuff i tried: http://codepen.io/anon/pen/MKPPzm (not sure why the "Logo" isnt aligned right but it works on my machine) Below is the HTML

<header class="top-bar">
  <div class="row">
    <!-- LEFT- - - - - - - - - - - - - - - -->
    <div class="top-bar-title">Logo</div>
    <div class="top-bar-left">
      <div class="row">
        <div class="large-12 columns">
          <div class="row collapse">
            <div class="small-10 columns">
              <input class="topSearch" type="search" placeholder="Search">
            </div>
            <div class="small-2 columns">
            <button href="#" class="button searchButton"><a class="fa fa-caret-down searchCaret"></a></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- RIGHT- - - - - - - - - - - - - - - -->
    <div class="top-bar-right">
      <!-- LINKS- - - - - - - - - - - - - - -->
      <ul class="menu navLinks">
        <li class="linkHome"><a href="#">Home</a></li>
        <li class="linkEvents"><a href="#">Events</a></li>
        <li class="linkProfile"><a href="#">Profile</a></li>
      </ul>
    </div>
  </div>
</header>

Answer 1

This is what I ended up doing, which worked for the most part although I'm having some problems with the top-bar-right links moving faster than the form is resized when the window is resized, and this causes them to collide sooner than i would like.

<div class="top-bar-left">
  <div class="input-group">
    <input class="input-group-field topSearch" type="search" placeholder="Search">
    <div class="input-group-button">
      <button href="#" class="button searchButton" type="button" data-toggle="searchDrop"><a class="fa fa-caret-down searchCaret"></a></button>
    </div>
  </div>
</div>

and the CSS:

.top-bar .input-group-field { width: 100%; }
.top-bar-left { width: 45%; }

edit: fix for the "moving faster" is to use width: calc(100% - [size of rest of container])