How can I align form-controls vertically when some of the labels span multiple lines?

Using Bootstrap 3, I have a horizontal form with labels on top of the controls. When one of the labels is too long, the text is wrapped to the next line (which is fine). However, this shifts the input box down (see below). How can I align the other input vertically so that it doesn’t look weird?

Example:

<div class="form-group">
  <div class="row">
    <div class="col-sm-6">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control">
    </div>
    <div class="col-sm-6">
      <label for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
      <input type="text" id="two" class="form-control">
    </div>
  </div>
</div>

This looks like this:
enter image description here

But I would like it to look like this:
enter image description here

Here’s a JSFiddle example: https://jsfiddle.net/13c420x6/2/

Source: Ask Javascript Questions

LEAVE A COMMENT