Problema al rotar texto dentro de un div

[alrockbit]

Hola. Tengo un texto dentro de una capa (div) y lo tengo rotado 90º con la propiedad transform:rotate de css. Además está centrado tanto horizontal como verticalmente.
El problema es que al cambiar ese texto por otro (que sigue rotado 90º), cambia las dimensiones de la capa (div) y me es indspensable que las dimensiones de la capa no cambien. ¿Por que cambia las dimensiones del div? ¿Como puedo fijar ese div para que no cambien sus dimensiones? Solo me pasa cuando cambio el texto rotado por otro, que sigue rotado. Si lo mantengo normal, horizontalmente, no tengo problema. Dejo código:

El HTML:

Código:

<div id="cuadro"><div class="interna">Texto centrado</div></div>
<button id="boton">Pulsa</button>

El CSS:

Código:

#cuadro{
        position: absolute;
        width: 50px;
	height: 200px;
	margin-left: 600px;
	margin-top: 200px;
	display: table;
	border: 1px solid #aaaaaa;
    	}

.interna{
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	transform: rotate(-90deg);

}

y el JQuery que me cambia el texto:

Código:

$(document).ready(function() {
	$('#boton').click(function() {	
		$('.interna').html('Otro texto');
	});
});