title: How to make textarea elastic with change the div area
body: <p>I have problem when use textarea elastic using jquery, the problem is i cannot change the div height when the textarea height changed.</p>
  <p>I already try using this jquery plugin : <a href="http://bensampaio.github.io/jquery.autogrow/" rel="nofollow noreferrer">http://bensampaio.github.io/jquery.autogrow/</a></p>
  <p>this my index.html :</p>
  <pre><code>            &lt;div class=&quot;col-8&quot; style=&quot;padding: 0;&quot;&gt;
                  &lt;div class=&quot;right-chat-header&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-2 chat-item-img&quot; style=&quot;padding-left: 45px; padding-right: 0;&quot;&gt;
                              &lt;img class=&quot;chat-img&quot; src=&quot;./assets/services-2.png&quot;&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-1&quot; style=&quot;padding: 0;&quot;&gt;
                                  &lt;div class=&quot;notification-status online&quot;&gt;&amp;nbsp;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-7 chat-item-text&quot; style=&quot;padding: 10px 0;&quot;&gt;
                              &lt;div class=&quot;profile-name &quot;&gt;
                                  &lt;span&gt;John&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;d-flex profile-status&quot;&gt;
                                  &lt;span class=&quot;profile-online&quot;&gt;Online&lt;/span&gt;
                                  &lt;span class=&quot;profile-off&quot; style=&quot;display: none;&quot;&gt;Not Available&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id=&quot;hide&quot; class=&quot;col-2 mt-3&quot;&gt;
                              &lt;button class=&quot;circle-button color-minimize&quot;&gt;&lt;i class=&quot;fa fa-minus&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;chat-area scrollbar-macosx&quot; style=&quot;position: relative;&quot;&gt;
                      &lt;div&gt;
                          &lt;div class=&quot;container mt-2&quot;&gt;
                              &lt;!-- Receiver chat --&gt;
                              &lt;div class=&quot;d-flex justify-content-end mt-3&quot;&gt;
                                  &lt;div class=&quot;chat-content-image&quot;&gt;
                                      &lt;div class=&quot;upload-image&quot;&gt;
                                          &lt;div class=&quot;time-image&quot;&gt;
                                              &lt;span class=&quot;time-item&quot;&gt;14:10&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- Sender chat --&gt;
                              &lt;div class=&quot;d-flex justify-content-start mt-3&quot;&gt;
                                  &lt;div class=&quot;chat-context&quot;&gt;
                                      &lt;div class=&quot;chat-text&quot;&gt;
                                          &lt;p&gt;test/p&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;chat-time&quot;&gt;
                                          &lt;p&gt;14:15&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- Receiver Chat --&gt;
                              &lt;div class=&quot;d-flex justify-content-end mt-3 mb-4&quot;&gt;
                                  &lt;div class=&quot;chat-context&quot;&gt;
                                      &lt;div class=&quot;chat-text&quot;&gt;
                                          &lt;p&gt;ok&lt;/p&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;chat-time&quot;&gt;
                                          &lt;p&gt;15:00&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;chat-keyboard d-flex&quot;&gt;
                              &lt;div class=&quot;col-2&quot; style=&quot;padding-right: 5px; margin-top: 40px;&quot;&gt;
                                      &lt;button type=&quot;button&quot; onclick=&quot;chooseFile();&quot; class=&quot;circle-button color-plus&quot;&gt;
                                          &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;col-8 mt-2&quot; style=&quot;padding-left: 0px;&quot;&gt;
                                  &lt;textarea placeholder=&quot;type here...&quot; rows=&quot;3&quot; class=&quot;keyboards mt-2&quot;&gt;
  
                                  &lt;/textarea&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;col-2&quot; style=&quot;margin-top: 30px;&quot;&gt;
                              &lt;button class=&quot;send-button&quot;&gt;&lt;img src=&quot;./assets/Send.png&quot; width=&quot;70%&quot;&gt;&lt;/button&gt;
                              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  <p>this is my ui output :
  <a href="https://i.stack.imgur.com/FRVT3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FRVT3.jpg" alt="enter image description here" /></a></p>
  <p>the output is only make textarea changed into down, but the div height not changed. My expected is like textboard area whatsapp web when you push shift+enter textboard area will what i want.</p>
  <p>Thank you</p>