I’m having the following table with a textarea inside the td:

<table>
    <thead>
    <tr>
        <th>n1</th>
        <th>n2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>HalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHallo</td>
        <td>
            <textarea id="myarea"></textarea>
        </td>
    </tr>
    </tbody>
</table>

With the following CSS:

#myarea {
    box-sizing: border-box;
    border: none;
    width: 100%;
    height: 100%;
    resize: none;
}

The result look like this:

How can I set the whole table row height dynamically to be as high as the textarea content?

Thank you!