title: Dynamic input box width in Foundation 5
body: <p>I'm just getting started with Foundation and trying to create a title bar with a search box. I want the search box to fill all available space in the title bar. However, nothing I've tried has quite worked:</p>
  
  <p>1) I tried setting a 50% width but at small screen sizes it pushed the other buttons off the top row </p>
  
  <p>2) I tried to implement this solution but couldn't get it working (see commented css)
  <a href="https://stackoverflow.com/questions/20092074/dynamic-width-for-input-text-box-html">Dynamic width for input text box (HTML)</a></p>
  
  <p>I've set up a jsfiddle here:
  <a href="http://jsfiddle.net/B7nS8/1/" rel="nofollow noreferrer">http://jsfiddle.net/B7nS8/1/</a></p>
  
  <p>Thanks for your help!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if IE 9]&gt;&lt;html class="lt-ie10" lang="en" &gt; &lt;![endif]--&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;My Site&lt;/title&gt;
  
  
      &lt;meta name="description" content="Desc." /&gt;
  
      &lt;link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" /&gt;
      &lt;script src="http://foundation.zurb.com/assets/js/modernizr.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
  
          .row { max-width: 1200px; }
  
  /*      .searchParent div { overflow: hidden; }
          .searchText { width: 100%;  }
          .searchButton { float: right; }
  */
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- Navigation --&gt;
  
      &lt;nav class="top-bar" data-topbar&gt;
          &lt;ul class="title-area"&gt;
              &lt;!-- Title Area --&gt;
              &lt;li class="name"&gt;
                  &lt;h1&gt;
                      &lt;a href="#"&gt;
                          My Site
                      &lt;/a&gt;
                  &lt;/h1&gt;
              &lt;/li&gt;
              &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;section class="top-bar-section"&gt;
              &lt;form&gt;
                  &lt;ul class="left"&gt;
                      &lt;li class="has-form"&gt; 
                          &lt;div class="row collapse searchParent"&gt; 
                              &lt;div class="large-8 small-9 columns searchText"&gt; 
                                  &lt;input type="text" placeholder="Find Stuff"&gt; 
                              &lt;/div&gt; 
                              &lt;div class="large-4 small-3 columns searchButton"&gt; 
                                  &lt;a href="#" class="button expand"&gt;Search&lt;/a&gt; 
                              &lt;/div&gt; 
                          &lt;/div&gt; 
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/form&gt;
  
              &lt;ul class="right"&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
      &lt;/nav&gt;
  
      &lt;!-- End Top Bar --&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="large-12 columns"&gt;
  
              &lt;div class="row"&gt;
  
  
  
              &lt;/div&gt;&lt;!-- End Thumbnails --&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- End Content --&gt;
  
  
  &lt;!-- Footer --&gt;
  
  &lt;footer class="row"&gt;
      &lt;div class="large-12 columns"&gt;&lt;hr&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="large-6 columns"&gt;
                  &lt;p&gt;&amp;copy; Copyright no one at all. Go to town.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="large-6 small-12 columns"&gt;
                  &lt;ul class="inline-list right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
      &lt;!-- End Footer --&gt;
  
  
  &lt;script&gt;
      document.write('&lt;script src=js/vendor/' +
          ('__proto__' in {} ? 'zepto' : 'jquery') +
          '.js&gt;&lt;\/script&gt;')
  &lt;/script&gt;
  &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).foundation();
  &lt;/script&gt;
  &lt;!-- End Footer --&gt;
  &lt;script src="http://foundation.zurb.com/assets/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="http://foundation.zurb.com/assets/js/templates/foundation.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>