Cfrgtkky

I have 4 labeled drop-down controls succeeding one another along the inline document axis. How can I style them so that the control boxes themselves are aligned along the same vertical line?

As you can see, currently the varying height of each label causes the drop-downs to appear at a different point, vertically:

That shouldn't be too difficult with a Grid layout:

<div>

    <label>Field 1....</label>

    <select></select>

    <label>Long Field Field Field Field Field</label>

    <select></select>

    <label>Field 2</label>

    <select></select>

    <label>Long Field Field Field Field Field</label>

    <select></select>

</div>

You make the container a Grid container:

div {

    display: grid;

}

And make sure the labels go on the first row only:

div > label {

    grid-row: 1;

}

Since your Grid container is a div it occupies all available space horizontally, and the label text may never wrap. Since you were concerned about input controls being aligned vertically, that will happen even if the labels have different height, you can test with limiting their width with, for instance:

div > label {

    max-width: 10em;

}

Don't forget to associate your label elements each with their respective control (using the for attribute for the label).

Try this

HTML

<div class="container">

  <div class="row">

    <div class="col-md-3 col-sm-3">

      <div class="form-group">

        <label for="exampleInputEmail1">Email address</label>

        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

      </div>

    </div>

    <div class="col-md-3 col-sm-3">

      <div class="form-group">

        <label for="exampleInputEmail1">Email addressaaaaaaaaaaaaaaaaaaaa</label>

        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

      </div>

    </div>

  </div>

</div>

CSS

.row {

  background: #f8f9fa;

  margin-top: 20px;

}



.col {

  border: solid 1px #6c757d;

  padding: 10px;

}

.form-group{

  height: 100%;

  display:flex;

  flex-wrap: wrap;

}

.form-control{

  align-self : flex-end;

}