Уберите у .middle свойство padding и добавьте:
display:inline-block;
vertical-align:top;
Без padding у вас блок не выглядывает потому, что margin перебрасывается на блок-родитель, и он тоже перемещается на 50 пикселов выше (если через devtools посмотрите, то увидите). Чтобы это не происходило, нужно вырвать блок из потока. Для этого можно использовать, к примеру,
display: inline-block,
display: table-cell,
float и
overflow: hidden. Последнее используют для этого чаще всего, но вам это не подходит, блок обрежется. Зато inline-block — самое то.
А вот неодинаково выглядывал ваш блок именно из-за padding :)
P.S. В данном случае у вас задана ширина 100%, поэтому display: inline-block никак не повлияет на отображение, что есть хорошо.
P.P.S. Вот
форк, на всякий случай.
Простой
Средний