Horizontal form is unable to align long label vertically with input

[lunak86]

I have got a long label next to my input and according to my review there is no way how to align them vertically (without setting a margin property on the long input what cannot be done automatically) in horizontal form. It is OK with a short label.

 <form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input1" class="col-lg-2 control-label">
        Labdas kjas kljas dlkjasd lksjd el1
    </label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="input1" placeholder="Input1">
    </div>
  </div>
  <div class="form-group">
    <label for="input2" class="col-lg-2 control-label">Label2</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="input2" placeholder="Input2">
    </div>
  </div>
</form>

[cvrebert]

Made the example into a JS Fiddle: http://jsfiddle.net/fdX46/1/

[cvrebert]

Looks properly aligned to me:

(Using Chrome on OS X Mavericks)
The text of both the input and the first line of the label have the same baseline.

[lunak86]

Hi cvrebert, thanks for your comment. Yes, "the text of both the input and the first line" is exactly what I mean. My expected result is that the vertical center of the input and the vertical center of the 2-lines label should have the same baseline. Because when you have f.ex. 5 inputs and one of them has two lines then it does not look well aligned.

I've been using this workaround in Bootstrap 2:

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

But I am not able to solve it twbs3.

[mdo]

We won't be changing this for the time being. Your CSS changes the layout of the forms as they all need to be floated for proper alignment. We'll do our best come v4 to improve form layout again <3.

[gopalkumar315]

thanks