Как сделать увеличение высоты textarea при набирании определенного количества символов

У меня есть такая структура:

<div class="card">
  <div class="header"></div>
  <div class="chat-messages"></div>
  <div class="chat-input">
    <form method="post">
      <textarea class="message-input"></textarea>
      <button class="send-button"></button>
    </form>
  </div>
</div>

send-button у меня находится над полем textarea в конце. Как сделать так, чтобы если вводить больше 50 символов, то происходил перенос строки и увеличение высоты textarea, как бы отбирая высоту у chat-messages, но эта отбираемая высота ограничена. Вот например у того же VK, Telegram и тд