Pegar contenido al fondo de una caja

[rogertm]

Hola por acá. pues bien, tengo una caja en la que a su vez, tengo cuatro cajas más con contenido diferente cada una, y por supuesto, la altura de cada una varía, y se me ocurrió que quedaría bien si se pegan estas cuatro cajas al fondo, pero no encuentro la manera. Tengo el siguiente código:

Código HTML:

<section id="footer-widget-area" role="complementary">
    <aside id="first" class="widget-area"> contenido 1 </aside>
    <aside id="second" class="widget-area"> contenido 2 </aside>
    <aside id="third" class="widget-area"> contenido 3 </aside>
    <aside id="fourth" class="widget-area"> contenido 4 </aside>
</section>
 

Código CSS:

#footer-widget-area {
    overflow: hidden;
}
#footer-widget-area .widget-area {
    float: left;
    margin-right: 20px;
    width: 220px;
}
 

He intentado jugar con la propiedad position y vertical-align, pero no logro lo que quiero. Aquí les dejo una imagen de lo que tengo y se darán cuenta de lo que quiero:



Saludos y gracias de antemano