Mal posicionamento en inline-block

[blancoarnau]

Hola todos. Me gustaría saber como posicionar BIEN dos elementos de lado con inline-block. Aquí tengo el CSS:

Código CSS:

#cuad1{
  background-color:blue;
  height:50px;
  width:50px;
  display:inline-block;
}
#cuad2{
  background-color:red;
  height:75px;
  width:50px;
  display:inline-block;
}
 

Y el resultado es este:



Si queréis verlo en el editor: http://jseditor.proyectosbds.com/eyurin/1/edit.

El problema es que el rojo sobresale por arriba y me gustaría que sobresaliese por debajo. ¿Cómo podría arreglar el problema? Y si no, ¿cómo podría alinear los cuadrados de lado y el que sobresale, lo hiciera por debajo?

GRACIAS :D

[pzin]

Usa:

Código CSS:

vertical-align: top;