On one of my pages, I have a text area html tag for users to write a letter in. I want the content below the text area to shift down, or in other words, I want the text area to resize vertically with each line added to the text area and to have the content below simply be positioned in relation to the bottom of the text area.

What I am hoping is that javascript/jquery has a way to detect when the words wrap, or when a new line is added and based on that do a resize of the text area container.

My goal is to make the content below the text area stay the same distance from the bottom of the text no matter how much a user writes.

The text area creates a scroll bar when the text overflows.