Расположение полосок гистограммы CSS внизу элемента div

Я пытаюсь создать виджет гистограммы с помощью CSS для таблицы показателей, которую я создаю.

В приведенном ниже коде столбцы гистограммы созданы правильно, они имеют правильную высоту, но, несмотря на то, что я указал вертикальное выравнивание: снизу, столбцы выравниваются по нижней части самого длинного столбца.

Если я создам полосу со значением 100 %, все будет хорошо выровнено, но у меня не всегда будет значение 100 %.

Я пробовал несколько вещей, в том числе абсолютное позиционирование... Я продолжаю что-то путать, и это почти все, что мне удалось отобразить правильно.

Кто-нибудь знает, как выровнять планки внизу контейнера? Вот код ниже (я включил как гистограмму с высотой 100%, которая отображается правильно, так и гистограмму с высотой только 45%, которая выравнивается только по нижней части полосы 45%:

<style>
    .metrics-table {
        margin-bottom: 20px;
        white-space: nowrap;
    }
    .metrics-row {
        display: inline-block;
        margin-right: 10px;
        vertical-align: top;
    }
    .text-metric, .text-value {
        display: inline-block;
        padding: 5px;
    }
    .text-metric {
        background-color: lightskyblue;
        color: black;
        border-radius: 5px;
    }
    .histogram {
        width: auto;
        height: 28px; /* Adjust height as needed */
        background-color: lightblue;
        border: 1px solid blue;
        border-radius: 5px;
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        line-height: 0; /* Remove extra space below */
    }
    .histogram-bar {
        width: 10px;
        background-color: blue;
        border-radius: 5px;
        display: inline-block;
        margin-left: 0px;
        vertical-align: bottom; /* Align bars to the bottom */
    }
</style>

<div class = "metrics-table">
    <div class = "metrics-row">
        <div class = "text-metric">Histogram</div>
        <div class = "histogram">
            <div class = "histogram-bar" style = "height: 5%;"></div>
            <div class = "histogram-bar" style = "height: 15%;"></div>
            <div class = "histogram-bar" style = "height: 25%;"></div>
            <div class = "histogram-bar" style = "height: 35%;"></div>
            <div class = "histogram-bar" style = "height: 45%;"></div>
            <div class = "histogram-bar" style = "height: 100%;"></div>
        </div>
    </div>
</div>
<div class = "metrics-table">
    <div class = "metrics-row">
        <div class = "text-metric">Histogram</div>
        <div class = "histogram">
            <div class = "histogram-bar" style = "height: 5%;"></div>
            <div class = "histogram-bar" style = "height: 15%;"></div>
            <div class = "histogram-bar" style = "height: 25%;"></div>
            <div class = "histogram-bar" style = "height: 35%;"></div>
            <div class = "histogram-bar" style = "height: 45%;"></div>
        </div>
    </div>
</div>