Why textarea higher than text input?

Question

Found it, sorry, changed padding and forgot to change it for textarea. My mistake. Will delete )

I'm trying to make table with text input and textarea input on the same row, but cannot make textarea the same height as the text input. Could anyone please tell me, why text input and textarea have different height and how to fix that? As you can see, textarea is 2px higher and chrome inspector tells me the same. What's wrong and how to fix that? (sorry for a large text, site told me that I've got "mostly code" and have to add some details. Have no idea, what else may I add to that code, the problem is obvious))) Thank you!

div
{
    background: #ddd;
}
input#te
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    line-height: 5em;
    vertical-align: middle;
}
textarea#ta
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    vertical-align: middle;
    resize: none;
}

<table>
    <tr>
        <td>
            <div>
                <input type=text id="te" value="input is 2px smaller in chrome">
            </div>
        </td>
        <td>
            <div>
                <textarea id="ta">textarea is 2px higher in chrome</textarea>
            </div>
        </td>
    </tr>
</table

Answer 1

change the padding on textarea:

div
{
    background: #ddd;
}
input#te
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0;
    background: transparent;
    height: 5em;
    line-height: 5em;
    vertical-align: middle;
}
textarea#ta
{
    position: relative;
    outline:0;
    border: 1px solid #a78;
    padding: 1px 0.5em;        
    margin: 0;
    background: transparent;
    height: 5em;
    vertical-align: middle;
    resize: none;
}

<table>
    <tr>
        <td>
            <div>
                <input type=text id="te" value="input is 2px smaller in chrome">
            </div>
        </td>
        <td>
            <div>
                <textarea id="ta">textarea is 2px higher in chrome</textarea>
            </div>
        </td>
    </tr>
</table