Как правильно выровнять плавающий блок по вертикали относительно родителя в данном случае?

Question

[tostername]

Высота левого блока меняется.

#container
{
  background: grey;
  display: inline-block;
  width: 100%;
}
#left-block {float: left; font-size:74px;}
#right-block
{
  float: right;
}

<div id='container'>
  <div id='left-block'>Left</div>
  <div id='right-block'>Right</div>
</div>

https://jsfiddle.net/hqprgL4x/3/

Answer 1

[Максим]

flexbox или

#container
{
  display: table;
  width: 100%;
}
#left-block,
#right-block {
 display: table-cell;
 vertical-align: middle;
}

Comments

[tostername]

Не выравнивается

[Максим]

tostername: https://jsfiddle.net/hqprgL4x/6/ всмысле ?

Answer 2

[Олег]

padding-top подойдет

#right-block
{
  float: right;
  padding-top:32px;
}

Comments

[tostername]

Высота левого блока меняется.

Answer 3

[gleendo]

#container {
  background: grey;
  width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#left-block {
	font-size:74px;
}