Positioning text against the bottom of a block element - html

Question

Given the following, how can I place the text foo at the bottom of the block div element?
<div style="width:100px; height:100px">foo</div>

Answer 1

You add display: table-cell and vertical-align: bottom:
div {
display: table-cell;
vertical-align: bottom;
background: red;
}
<div style="width:100px; height:100px">foo</div>
Add another one using pseudo-elemet :before(height must be equal of div height):
div {
background: red;
}
div:before {
content: "";
display: inline-block;
vertical-align: bottom;
position: relative;
height: 100px;
}
<div style="width:100px; height:100px">foo</div>

Answer 2

Put it in a separate element with:
position:absolute;
bottom:0;
And give the parent position:relative to establish a new positioning context.
Example fiddle.

Answer 3

Try playing with beautiful and modern flex-box:
<div style="width:100px; height:100px; display: flex; align-items: flex-end;">foo</div>
Keep in mind that it's absolutely mandatory to keep styles where their place is:
.myDiv {
width:100px;
height:100px;
display: flex;
align-items: flex-end;
}
I'm aware that this approach is not 100% supported but yet another addition to the tons of answers which are about to show up.
Moreover, I wouldn't take IE8 into account those days.