Why doesn't an inline block align to the bottom?

Question

css

codepen.io/anon/pen/MywqmV?editors=1100
We need to put the orange element on the bottom edge of the green one. It seems like I'm doing everything right, but I don't want to get up. I don’t consider the relative option on the parent and absolute on the child, it’s necessary with vertical-align.

Answer 1

Add to your css:

.first_one:after {
  content:'';
  vertical-align: bottom;
  display: inline-block;
  height: 100%;
}

For night reading: https://habrahabr.ru/company/netcracker/blog/277433/

Answer 2

You can set the green block to line-height: 500px;
Then return to orange line-height: 1.5em;
codepen.io/anon/pen/pyJxjq