Как сделать кнопки разной высоты в тулбаре bootstrap4

При переходе с bootstrap 3 на bootstrap 4 возникла, некоторая проблема, а именно, в 3ей версии, несколько кнопок разного размера обёрнуты в тулбар. В 4й версии, все кнопки в тулбаре автоматически имеют высоту самого большого элемента, например:

Эта разметка в 3ей версии работает, как надо:

<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
       <button type="button" class="btn btn-default">lg</button>
       <button type="button"class="btn btn-default">lg</button>
    </div>
    <div class="btn-group">
       <button type="button" class="btn btn-default">btn</button>
       <button type="button" class="btn btn-default">btn</button>
    </div>
    <div class="btn-group btn-group-sm">
       <button type="button"class="btn btn-default">sm</button>
       <button type="button"class="btn btn-default">sm</button>
    </div>
    <div class="btn-group btn-group-xs">
       <button type="button" class="btn btn-default">xs</button>
       <button type="button" class="btn btn-default">xs</button>
    </div>
</div>

Как это выглядит в 4й:

В четвертой версии эта же разметка не работает должным образом (даже не обращая внимания, что в 4‑й версии нету класса '.btn-group-xs')

Хотя в документации ни слова не сказано об отличиях от 3ей версии в поведении элементов.

Вопрос: как можно сделать группы кнопок разного размера, обернув их в тулбар?

Если никак нельзя, тогда возникает следующий вопрос:

Без тулбара кнопки выглядят вот так:

Как их можно выровнять по верху?

Спасибо.