Position div to bottom of a different div, without using Absolute [closed]

Answer 1

Nowadays you can simply use display: flex for all these alignment issues.

In your case you can simply make the parent a flex, flex-direction column (the default is row) and justify-content: flex-end. The advantage of this approach is that it also works if you have multiple items in the parent.

If you have multiple ones and want to have them all aligned from the beginning of the parent till the end, you can change justify-content to another property such as space-between or space-evenly.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}