Почему инлайн-блок не выравнивает по нижнему краю?

Question

[K G]

codepen.io/anon/pen/MywqmV?editors=1100

Нужно поставить оранжевый элемент по нижнему краю зеленого. Вроде все делаю правильно, а вставать вниз не хочет. Вариант relative на родителя и на дочерний absolute не рассматриваю, нужно именно с vertical-align.

Answer 1

[Андрей Федоров]

Добавьте в свой css:

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

Для ночного чтения: https://habrahabr.ru/company/netcracker/blog/277433/

Answer 2

[Антон Нагаец]

Немного поправил
Позиционирование элементов внутри блока теперь намного удобнее с flexbox. Крайне рекомендую.

Comments

[K G]

поддержка данного решения браузерами?

[Антон Нагаец]

pwnography: caniuse.com/#feat=flexbox
ie с префиксами -ms
Остальные штатно

[K G]

Все же жду решения с vertical-align

[Антон Нагаец]

pwnography:
display:table-cell;
vertical-align:bottom;

Обновил на кодпене

Answer 3

[Руслан Галиев]

Можно зеленому блоку задать line-height: 500px;
Затем оранжевому вернуть line-height: 1.5em;

codepen.io/anon/pen/pyJxjq