Выровнять по горизонтали нижнюю часть поля ввода в группах форм начальной загрузки

Question

Используя Bootstrap 4 в моем приложении Angular 5, у меня есть две группы форм рядом друг с другом.Когда текстовая метка одного намного длиннее другого, поля ввода не выстраиваются в линию, что выглядит странно, когда на странице несколько строк, подобных этой.

Вы можете видеть именно то, что ясреднее значение в https://angular -wcd2ln.stackblitz.io /

Как я могу сказать, что я хочу, чтобы две входные метки были выровнены по вертикали и чтобы метка "нажималась" с помощьюполе ввода?

Answer 1

Используйте служебные классы flexbox (d-flex flex-column) на form-group и mt-auto (margin-top: auto) на входах управления формой ...

 <div class="row">
        <div class="col-6">
            <div class="form-group h-100 d-flex flex-column">
                <label for="left">This is a short label.</label>
                <input class="form-control mt-auto" id="left" type="text">
            </div>
        </div>
        <div class="col-6">
            <div class="form-group h-100 d-flex flex-column">
                <label for="right"> 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 laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </label>
                <input class="form-control  mt-auto" id="right" type="text">
            </div>
        </div>
 </div>

https://www.codeply.com/go/z0vucbNNU9