I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
<div class="col-sm-10"> <!-- higher element -->
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<br>Random stuff
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
Email1
is currently shown at the top of its own row as can be seen in this plunker snippet.
EDIT: So to clarify my intentions, this is the current state:
And this is what I would like to have (the blue area is the previously mentioned "row"):
If you are ready to drop support for some "old" browsers, you can use the flexbox features (see caniuse.com flex)
<div class="form-group flex-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<br>Random stuff
</div>
</div>
@media (min-width: 768px) {
.flex-group {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.form-horizontal .flex-group .control-label {
padding-top: 0;
}
}