solucionar problema estetico

[roboty]

hola lo que intento es tener dentro de una capa tres capas alineadas de arriba y abajo, a dos de las capas del interior le asigno un alto y un ancho y a la otra capa de interior que queda en medio no le asigno nada ya que su altura y anchura se define sola porque contiene texto, el problema esta ahi que al tener texto esta capa que va en medio no me queda en linea las capas pongo ejemplo en html.

Código HTML:

<div id="principal">
     <div class="capa1"></div>
     <div class="capa2">contenido</div>
      <div class="capa3">
            <img src="mascota.jpg" width="100%" height="100%"/>
      </div>
</div>
 

css

Código CSS:

#principal{
    border:solid 1px pink;
    position:absolute;
    top:30px;
    left:30px;
}
#principal div{
   display:inline-block;
}
.capa1{
    width:100px;
     height:50px;
     border:solid 1px blue;
}
.capa2{
     border:solid 1px red;
}
.capa3{
    width:100px;
     height:50px;
     border:solid 1px green;
}
 

este ejemplo es para que entendais mi problema que no se como solucionar, si la capa2 que es la que contiene texto le quito el texto y le asigno una altura y anchura queda alineado pero como puedo hacerlo con texto.

Saludos.