How to Make Text Align Bottom using CSS

What I want to achieve is like picture below.

 

Getting The Job Done

The simple trick to make it works like expected is we need to treat the element as table element. Set display element to table-cell which has vertical-align, the property which what we want to align the text to the bottom. The example below makes H2 element align to the bottom.

h2.bottom {
   display: table-cell;
   vertical-align: bottom;
   height: 60px; /* it's better to make it static */
   line-height: 30px; 
   width: 400px;  /* only as example */
}

Share on Facebook Twitter