Bottom-align elements of different heights

The trick here is really about getting the containing boxes of each element to be the same size even if their contents differ. Once this is achieved, you can add a pseudo element and its starting position will be in the same position relative to its container.

by Matthew Day

HTML

<div class="box main">
    <div class="content">01</div>
</div>
<div class="box">
    <div class="content">02</div>
</div>
<div class="box">
    <div class="content">03</div>
</div>
<div class="box">
    <div class="content">04</div>
</div>
<div class="box">
    <div class="content">05</div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.box {
    display: block;
    float: left;
    height: 40px;
    margin: 0 .5em;
    /* border: 1px solid gray; */
}

.box::after {
    display: block;
    content: '';
    margin: 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: red;
    opacity: 0;
    transition: all 1s ease-in-out;
}

.box:hover::after {
    opacity: 1;
}

.content {
    padding-top: 1em; /* Pushes smaller numbers to the bottom of their containers so that psuedo elements for each one line up correctly. */
    font-size: 1em;
    height: inherit; /* This basically makes sure that .content expands to fill its parent container. Without it, psuedo elements do not line up. */
    /* border: 1px solid red; */
}

.main .content {
    padding-top: .1em; /* Matches the baseline of the larger number with the smaller numbers. */
    font-size: 2em;
}