CODEWITHSUNDEEP
cssangularjstwitter-bootstrap-3
Mohit
Mohit

Reputation: 921

How to align form inputs with different length of multiline labels side to side in bootstrap forms across browsers?

I have two divs in my form. They may have different lengths of their labels. I wish to align both the multiline text labels at top and the identical input divs to be centrally aligned with each other.

An example jsfiddle can be found below:

http://jsfiddle.net/ahujamoh/0v2fj4mc/

<div class="container">
<div class="row">
    <div class="form-group col-md-6">
        <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
        <input class="form-control" id="first">
    </div>
    <div class="form-group col-md-6">
        <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
        <input class="form-control" id="second">
    </div>
</div>


 .row {
    vertical-align: bottom;
}

.form-group .control-label{
    height:40px;
}

Actual: the top of text labels are aligned but the input boxes are not centrally aligned.

Actual output

Expected: the top of text labels are aligned and the input boxes are centrally aligned.

Expected output

Upvotes: 0

Views: 508

Answers (1)

DumbCoder7
DumbCoder7

Reputation: 252

I have added the class inputdiv to each child of the div and convert that child to a flexbox.

 .row {
    vertical-align: bottom;
}


.inputdiv{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 30vh;
}

I have set the min-height property to 30vh. Feel free to play around with this value as you wish.

<div class="container">
    <div class="row">
        <div class="form-group col-md-6 inputdiv">
            <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-md-6 inputdiv">
            <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
            <input class="form-control" id="second">
        </div>
    </div>
</div>

Upvotes: 2

Related Questions