[SOLVED] Textarea is moving under header when clicking on it

Question

I have a fixed header in my page.
And when I click inside the textarea in the page, the textarea moves to the top and gets hidden under the header.
So, I need the textbox to move only to the bottom of the header, not to the top of the screen.

Code link: https://code.sololearn.com/Wmv8kK5kLpnx/?ref=app

Answer 1

https://code.sololearn.com/WhL6hn7qyrvQ/?ref=app

Answer 2

Steve Sajeev that is not the problem.
The problem is whenever the textarea is clicked to type some text, the textarea hides under the header. I want it to stay below the header.

Answer 3

Kelvin Paul's approach looks awesome

Answer 4

Steve Sajeev thank you so much bro 😇

Answer 5

Kelvin Paul awesome, thank you🥰🙏

Answer 6

Bibek Oli welcome bro😌✌