Align a star vertically in the middle to a text area

Question

Right now the star is at the bottom of the textarea. How to align the star in below html vertically to the middle of the textarea.

Here is the html

 <table>
    <tr>
        <td valign="middle">
            <textarea id="txtDescription"></textarea>
                    <span class="star">*</span>
        </td>
    </tr>
</table>

And the style

  .star
    {
        color: #ff0000;
        margin: 0 0 0 5px;
    }

Here is the demo

Answer 1

Create a new <td> and add there star:

html

<table>
        <tr>
            <td valign="middle">
                <textarea id="txtDescription"></textarea>

            </td>
            <td>
                <span class="star">*</span>                
            </td>
        </tr>
    </table>

fiddle

Answer 2

just take span into another td tag

check

http://jsfiddle.net/dVV5B/

 <table>
    <tr>
        <td valign="middle">
            <textarea id="txtDescription"></textarea>
        </td>
       <td> <span class="star">*</span>
        </td>
    </tr>
</table>

Answer 3

I have done using css float inside 'td' tag and working DEMO

CSS

textarea{
    float:left;

}

span{
    float:right;
    margin:10px;
    color:green;


}