Невозможно установить два элемента на одном горизонтальном уровне

Question

https://jsfiddle.net/xtm5oqjh/ Когда вы открываете мой модальный (знак «+» на панели навигации), вы видите, что кнопка «сохранить изменения» и выпадающий список «приоритет» не имеют одинаковую высоту и не находятся на одном уровне по горизонтали.

После этого:

.input-group {
    height: 31px;
    padding-bottom: 0;
    margin-bottom: 0;
}

Она получает ту же высоту, что и кнопка Сохранить изменения, но она по-прежнему не находится на том же уровне по горизонтали, как и поле. Я озадачен тем, почему это произошло. Любые подсказки?

Answer 1

Этот элемент:

<div class="input-group mb-3 w-50">
  ...
</div>

Класс mb-3 добавляет margin-bottom к этой группе элементов, поднимая его выше, чем кнопка «Сохранить изменения», с которой вы пытаетесь выровнять его.,Удалите этот класс, и вы должны быть в порядке.