css - Align text to the bottom of a div

Question

I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
  <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

Answer 1

Flex Solution

It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}

<div class="wrap">
  <span>Align me to the bottom</span>
</div>