JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div id="chat" class="session-textchat">
    <div class="past-messages">
      <div class="receiver">
        <span class="message">
        Good afternoon David. Welcome to your appointment! How are you today?
      </span>
      </div>
      <div class="sender">
        <span class="message">
        Hello doctor. I feel terrible to be honest.
      </span>
      </div>
      <div class="receiver">
        <span class="message">
        I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
      </span>
      </div>
      <div class="sender">
        <span class="message">
        Hello doctor. I feel terrible to be honest.
      </span>
      </div>
      <div class="receiver">
        <span class="message">
        I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
      </span>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a href="#" id="send_button" class="btn btn-success">Send message</a>
  </div>
</div>

SCSS

.session-textchat {
  display: flex;
  flex-direction: column;
  height: 300px;
  margin-bottom: 30px;
  background: #fff;
  overflow-y: scroll;
  .past-messages {
    margin-top: auto;
    width: 100%;
    max-width: 980px;
    .receiver,
    .sender {
      width: 100%;
      min-height: 47px;
      margin: 0 0 20px 0;
    }
    .receiver .message,
    .sender .message {
      position: relative;
      padding: 15px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
    }
    .receiver {
      text-align: left;
      .message {
        background: #f4f4f4;
        color: #535353;
      }
    }
    .sender {
      text-align: right;
      .message {
        background: url('../img/rgbapng/0050ff26.png');
        background: rgba(0, 80, 255, 0.15);
        color: #0050ff;
      }
    }
  }
}

JavaScript

function updateScroll() {
  $("#chat").animate({ scrollTop: $('#chat').prop("scrollHeight")}, 1000);
  console.log('ok');
}
updateScroll();
$("#send_button").on('click', updateScroll);