Alienación vertical de un textarea y una imagen

Buenas a todos, siempre he tenido problemas con el diseño de formularios y sobre todo con la alineación de estos con imágenes y texto.

En este caso tengo un textarea:

Código :

input, textarea, select {border:solid 1px #555555; background:#FFFFFF; width:100px; height:19px; color:7b7b7b; font-family: Times, serif; font-size:12px; margin-left:5px;}

que entre la altura y el borde tiene un alto de 21px.

Ahora tengo una imagen de un calendario que va a continuación del textarea y que mide 21px. Pues dicha imagen no queda alineada con el textarea, en concreto se queda 8 px hacia arriba.

Asi queda:


Este es el código del div donde van ambos elementos:

Código :

<div style="height:21px; vertical-align:bottom;"><input name="" type="text" /><img src="imagenes/calendario.gif" alt="Elija fecha de llegada al hotel" /></div>

Alguna ayuda???

Muchas gracias, con un vertical-align:top tanto en el input como en la imagen solucionan el problema. (con valign middle no se soluciona, al menos en mi caso)