Textarea cursor not starting from beginning

I have a <textarea> in HTML. When I put cursor in it, it's not starting from the beginning, but is blinking in middle.

HTML

<TD width="21%">
    <textarea class="txtarea" style="height:30px;" rows="3" name="Text" Id="Text" value=""> </textarea>
</TD>

CSS

.txtarea{
    border-right: #646464 ;
    border-top: #646464;
    border-left: #646464;
    border-bottom: #646464;
    width:100%;
    background: #ffffcc;
}

<textarea class="txtarea" style="height:30px;" rows="3" name="Text" Id="Text" value=""> </textarea>

What you have is a space between <textarea> and </textarea> tags.

Textarea's opening and closing tag must be in same line because Whatever in between textarea tag it will considered as "value" of textarea. Now for below code placeholder will also shown as expected.

<textarea
  placeholder="Enter text here" 
  class="txtarea"
  style="height:30px;"
  rows="3"
  name="Text"
  id="text"
></textarea>