You can do it two ways, either by using CSS Positioning Technique where you need to set the parent element to position: relative;
and the child element to position: absolute;
Demo (Wrapping the text using a span
element)
.box > span {
position: absolute;
bottom: 0;
left: 0;
}
Or by using display: table-cell;
with vertical-align: bottom;
Demo (No change in the markup)
.box {
height: 187px;
width: 187px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
color: white;
display: table-cell;
vertical-align: bottom;
}
Also, would like to refactor your CSS a bit, the below snippet
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
Can be wrote as margin: 5.5px 5.5px 5.5px 5.5px;