Выравнивание группы кнопок Bootstrap 4 в нижней части элемента flexbox

Question

У меня есть такой HTML-код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="border d-flex align-items-baseline m-2 p-2" style="width: 400px">
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">Prev</button>
    <button class="btn btn-secondary">Next</button>
  </div>
  <div class="form-group flex-grow-1">
    <label for="volume">Volume:</label>
    <input type="range" class="form-control-range" id="volume" min="1" max="100" step="1" value="7">
  </div>
</div>

Как видите, кнопки «Предыдущая» и «Следующая» выровнены по верху элемента div, например:

Моя цель состояла в том, чтобы выровнять их по дну, например:

Как мне этого добиться?Я думал, что это будет делать класс align-items-baseline, но я, должно быть, что-то неправильно понимаю.

Answer 1

Класс align-items-baseline делает align-items: baseline, но вам нужно align-items: flex-end

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="align-items: flex-end" class="border d-flex m-2 p-2" style="width: 400px">
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">Prev</button>
    <button class="btn btn-secondary">Next</button>
  </div>
  <div class="form-group flex-grow-1">
    <label for="volume">Volume:</label>
    <input type="range" class="form-control-range" id="volume" min="1" max="100" step="1" value="7">
  </div>
</div>