Как разместить два блока в разных концах одного?

Question

[Ingernirated]

Всем привет!
Подскажите, как 2-ой блок переместить в низ, чтобы он был, как верхний, но в притык к низу?
bottom:0px;
не выходит.
https://jsfiddle.net/rdq4gsn0/

Answer 1

[0xD34F]

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Answer 2

[BigSmoke]

Можно с помощью позиционирования.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  position: relative;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
  position: absolute;
  bottom: 0;
}

Или флексами.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
}