Escribir verticalmente y que ocupe el 100% del div

[madman_18]

Hola a todos!

Tengo un bloque el cual el height me va aumentando, no es fijo...ahora, tengo su título de la caja está escrito de forma vertical pero no consigo hacer que si el div por ejemplo me mida 200px, el título también me mida 200px, no sé como hacerlo ¬¬

Os pongo el código y la estructura por si veis si falla algo:

Código HTML:

<section class="bloque-recomendamos" id="sugerencias">
            
            <article class="titulo-recomendamos">
                <p style="height:100%;">Recomendamos</p>
            </article>
            <aside class="recomendamos">
                <ul>
                    <li>
                        <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
                        <img src="imagenes/aside/lata.png"/>
                        <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
                    </li>
                    <li>
                        <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
                        <img src="imagenes/aside/lata.png"/>
                        <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
                    </li>
                    
                </ul>
            </aside>
            <div class="limpia"></div>  
</section>
 

Código CSS:

section.bloque-recomendamos{
    width:250px;
    height:auto;
    position:fixed;
    top:50%;
    left: -226px;
    margin-top: -125px;
    /*background:#F2F2F2;*/
    border-left: 2px solid #A5942A;
    border-top: 2px solid #A5942A;
    border-bottom: 2px solid #A5942A;
    border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -o-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -o-border-bottom-right-radius: 10px;
    
}
article.titulo-recomendamos{
    width:16px;
    height:100%;
    float:right;
    font-size: 16px;
    word-wrap: break-word;
    color:#F2F2F2;
    background: #A5942A;
    margin:0 auto;
    text-align:center;
    padding: 5px;
    cursor:pointer;
    border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -o-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -o-border-bottom-right-radius: 10px;
}
 
aside.recomendamos{
    width:85%;
    float:left;
    padding: 5px 1.5%;
}