CSS Issue in Jsp and HTML

Question

I started working in one of the legacy applications and it uses JSP with CSS.

It has a textarea like below which has the CSS but the FONT in the textarea is not on the TOP - LEFT, Rather it is there in middle of the text area like below

JSP Code :

<td class="tableContents"><textarea class="headerTextArea" readonly="readonly">
                                                        <c:forEach var="fordisplay"
                                                            items="${listofvalues}" varStatus="idx">
                                                        <c:out value="${fordisplay }" />
                                                        <% out.print("\n"); %>
                                                        </c:forEach>
                                                        </textarea></td>

CSS Code :

.headerTextArea {overflow: auto;  COLOR: blue; border: outset 1px white;  background: lightgray;  FONT: 10pt 'Arial', 'Sans-serif'; width: 185px; padding-top: 0px;padding-left: 2px; padding-right: 2px;}

Inspect view from browser :

Expected :

Actual :

Could someone help on achieving the actual (having the FONT text in the Top - Left view) ?

Thanks,
Harry