Positioning CSS Histogram bars at the bottom a div

I am trying to create a histogram widget with CSS for a metrics table that I am creating.

In the code below The histogram bars are created correctly, they have the right height but despite me specifying vertical-align: bottom, the bars align at the bottom of the longest bar.

If I create a bar that is 100%, everything aligns fine but I won’t always have a 100% value.

I have tried multiple things, including positioning absolute… I keep messing things up and this is the closes I got to displaying it correctly

Does anyone how to align the bars at the bottom of the container? Here is the code below (I have included both a histogram with height 100% which displays correctly and one with only 45% which only aligns at the bottom of the 45% bar:

<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>

>Solution :

One simple option would be to add this:

.histogram {
    display: inline-flex;
    align-items: end;
}

.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;
    vertical-align: bottom;
    line-height: 0; /* Remove extra space below */
    display: inline-flex;
    align-items: end;
}
.histogram-bar {
    width: 10px;
    background-color: blue;
    border-radius: 5px;
    display: inline-block;
    margin-left: 0px;
    vertical-align: bottom; /* Align bars to the bottom */
}

<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>