Javascript-форум - Произвольное изменение размеров блока

День добрый! Имею какую-то непонятную проблему с исполнением простейших функций на jq. Алгоритм выполнения оооочень простой, при нажатии на див, этот див(кнопка "показать") скрывается, предыдущий увеличивает высоту, отображается третий див(кнопка скрыть).

Суть проблемы в том, что, при отображении последнего див, его ширина отличатся от всех остальных.

Вот тест:
https://jsfiddle.net/xdt2tm1q/20/

<div id="reg-content">
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
</div>
<div class="more-button">more=>...</div>
<div class="hide-button">hide ^...</div>

$(document).ready(function(){
$('.hide-button').hide();
var myheight = $('#reg-content').height();
$('#reg-content').css('height','50px');
$('.more-button').click(function(){
$('.more-button').hide();
$('.hide-button').show();
$('#reg-content').animate({ 
      height: myheight
      }, 500);
});
$('.hide-button').click(function(){
$('#reg-content').animate({ 
      height: "50"
      }, 500);
$('.more-button').show();
$('.hide-button').hide();
});
});