css works on input text not text area

Question

This is a jsfiddle

http://jsfiddle.net/2GpmW/

when I set the css, I did this:

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
    border: none;
    color: #525252;
    height: 30px;
    line-height: 15px;
    margin-bottom: 10px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 2px 0px 2px 5px;
    width: 400px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background: #DFDFDF;
    font-family: inherit;
    font-size: inherit;
}

so as you see the css show be applied to both input text and text area but for some reasons, the label beside the text area becomes down and place holder inside the text area is not centered vertically as it is in the input text

please :

1- why is that happening?

2- how to solve it

Many thanks

Answer 1

You have to use this:

textarea{
    vertical-align: top;
}

fiddle

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element.

Answer 2

You have to add vertical-align:middle to both textarea and label.

label, textarea{
 vertical-align: middle;
}