title: Zurb Foundation 4 Inline form that collapses
body: <p>I'm trying to get inline form elements in the Foundation 4 responsive CSS framework to collapse but i'm having no luck.</p>
  
  <p>[Label] [Input] [Label] [Input]</p>
  
  <p>to collapse to:</p>
  
  <p>[Label] [Input]
  [Label] [Input]</p>
  
  <p>It works fine without the labels being inline with the inputs e.g. just above them.</p>
  
  <p><img src="https://i.stack.imgur.com/pl8QN.png" alt="Example as an image"></p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;form&gt;
    &lt;div class="row"&gt;
      &lt;div class="small-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="small-3 columns"&gt;
            &lt;label for="right-label" class="right inline"&gt;Label&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="small-3 columns"&gt;
            &lt;input type="text" id="right-label" placeholder="Inline Text Input"&gt;
          &lt;/div&gt;
          &lt;div class="small-3 columns"&gt;
            &lt;label for="right-label2" class="right inline"&gt;Label2&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="small-3 columns"&gt;
            &lt;input type="text" id="right-label2" placeholder="Inline Text Input"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>