How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

Show code snippet

---

The solution above is probably more flexible, however, here is an alternative solution:

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Show code snippet

---

As a side note, you may want to add vendor prefixes for additional support.