Aligning three divs side by side and along the bottom of the longest
<p>I know similar questions have been asked, but my scenario is slightly different. I have three divs, which are aligned in a row. I basically want all of their content to be pushed to the bottom. I've tried using position: relative and position: absolute, bottom: 0, but that didn't work.</p>

<p>Here is the css and some images. I put borders to try to clarify:</p>

<pre><code>.topAlbums {
    border: 2px solid black;
    overflow: hidden;
}
.album0 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
.album1 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
.album2 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
</code></pre>

<p><a href="https://i.stack.imgur.com/WAfhM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAfhM.png" alt="enter image description here"></a></p>