auto scroll chat window

Question

I have made a simple chat UI using bootstrap 4 cards, I need a way to fix the message input to the bottom and to scroll the conversation automatically when the height of the window is filled by the sent and incoming messages. I've tried to fix the message input using a fixed position with the bottom set to 0 but the input then will take all the window width and this isn't what I want. Also for the text messages, I've tried to scroll the window using jQuery but it will not work and I need to scroll the window manually. another issue is with the code I'm using to add the sent and received messages to the DOM, I don't want to duplicate the code, but I can't imagine another solution to differentiate the incoming messages from the outgoing.

Here is the code I've:

function scrollConversation() {
  $(".list-group").stop()
    .animate({
      scrollTop: $(".list-group")[0].scrollHeight
    }, 1000);
}

function outMessage(message) {
  //var html = '<li class="list-group-item">';
  var html = '<p class="speech-bubble-out float-right">' + message + '</p>';
  //html += '</li>';
  $('.list-group').append(html);
  //return ;
}

function inMessage(message) {
  //var html = '<li class="list-group-item">';
  var html = '<p class="speech-bubble-in float-left">' + message + '</p>';
  //html += '</li>';
  $('.list-group').append(html);
}

body {
  background-color: #f5f5f5;
}

body .speech-bubble-out {
  padding: 1em;
  position: relative;
  background: #dad8da;
  border-radius: .4em;
}

body .speech-bubble-out:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.563em solid transparent;
  border-left-color: #dad8da;
  border-right: 0;
  border-bottom: 0;
  margin-top: -0.281em;
  margin-right: -0.562em;
}

body .speech-bubble-in {
  padding: 1em;
  position: relative;
  background: #efe8b8;
  border-radius: .4em;
}

body .speech-bubble-in:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.563em solid transparent;
  border-right-color: #efe8b8;
  border-left: 0;
  border-bottom: 0;
  margin-top: -0.281em;
  margin-left: -0.562em;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-12 col-md-7 col-lg-7 card">
      <div class="card-body">
        <!-- message list -->
        <ul class="list-group"></ul>
        <!-- text input -->
        <div class="input-group">
          <input type="text" class="form-control" name="message" id="">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" id="sendMessage">Send</buttom>
                  <button class="btn btn-outline-secondary" id="sendAudio">Send Audio</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Any help will be appreciated.