title: Bootstrap grid cell height breaks wrapping
body: <p>I'm trying to make a responsive form using Bootstrap, but "cell" (Bootstrap grid element) heights are breaking the row alignment.  And since this is supposed to be responsive, I don't think I can define <code>&lt;div class="row"&gt;</code> to force a new row (since I don't know what the rows will be).</p>
  
  <p>In most instances the input height is greater than the label and there is no issue, but if the label wraps onto the second line, it's height becomes greater than the input, and the next row of grid elements starts from there.</p>
  
  <p>Is there a way around this?  I've searched and only found fixed-height rows (and sometimes called fixed-height columns), but those seem to be hacks and not universally supported by browsers.  Surely there is a Bootstrap way to do this that I haven't found.</p>
  
  <p><strong>Sorry</strong>, the provided snipped doesn't break in the demo frame, it needs to be run full screen.  Resize the browser to see it break at most sizes, and work in a small subset (exactly the size of the snippet output).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
    Fugly border to clearly illustrate the problem
  */
  label {
    border: 1px solid;
  }
  
  div {
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
      &lt;label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field1"&gt;Long label text goes here:&lt;/label&gt;
      &lt;div class="col-xs-8 col-sm-4 col-lg-3"&gt;
          &lt;input class="form-control" id="Field1" placeholder="Field1" type="text"/&gt;
      &lt;/div&gt;
      &lt;label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field2"&gt;Short label:&lt;/label&gt;
      &lt;div class="col-xs-8 col-sm-4 col-lg-3"&gt;
          &lt;input class="form-control" id="Field2" placeholder="Field2" type="text"/&gt;
      &lt;/div&gt;
      &lt;label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field3"&gt;Short label:&lt;/label&gt;
      &lt;div class="col-xs-8 col-sm-10 col-lg-3"&gt;
          &lt;input class="form-control" id="Field3" placeholder="Field3" type="text" runat="server" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>