Смещение текстовой области, когда две разные текстовые области возможны в одном и том же месте, используя EventListener

У меня есть слушатель событий, который будет показывать текстовую область для написания сообщения в зависимости от выбранной строки темы. Код работает, но вторая текстовая область почему-то отступается.

Код HTML: 

<td>Message</td>
<td><textarea id="area1" cols="80" rows="6"
    onfocus="if(this.value==this.defaultValue)this.value='';"
    name="area1">Please type your message here</textarea>
</td>
<td><textarea readonly id="area2" cols="80" rows="6" hidden
    name="area2">Some text here</textarea>
</td>

Код javascript выглядит следующим образом:

<script>
    document.getElementById('subject').addEventListener('change', function () {
        if (this.value == 'Subject1') {
            document.getElementById('area1').style.display = 'none';
            document.getElementById('area2').style.display = 'block'

        } else {
            document.getElementById('area1').style.display = 'block';
            document.getElementById('area2').style.display = 'none'
        }
    });
</script>

Любая помощь будет очень признательна, спасибо

Ответ предоставлен @epascarello

<td>Message</td>
<td><textarea id="area1" cols="80" rows="6"
    onfocus="if(this.value==this.defaultValue)this.value='';"
    name="area1">Please type your message here</textarea>
    textarea readonly id="area2" cols="80" rows="6" hidden
    name="area2">Some text here</textarea>
</td>
Вернуться на верх