I am working with HTML code that looks like this:
<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>Currently, the Prev and Next buttons are aligned to the top of the div, as shown here:
https://i.sstatic.net/cl3Se.png
However, I would like them to be aligned to the bottom, like this:
https://i.sstatic.net/arIAl.png
How can I achieve this alignment? I thought using the align-items-baseline class would do the trick, but it seems I may have misunderstood something.