Закрепить форму внизу страницы

<div class="card chat-box" id="mychatbox">
<div class="card-header">
    <h4>Chat</h4>
</div>
<div class="card-body chat-content" id="messages">
        @foreach($messages as $message)
            <p>
                {{ $message->content }}
            </p>
        @endforeach
</div>
<div class="card-footer chat-form">
    <form id="chat_form">
        <input type="text" name="message" id="message" class="form-control" placeholder="Type a message">
        <button class="btn btn-primary" id="message" name="message" type="submit">
            <i class="far fa-paper-plane"></i>
        </button>
    </form>
</div>

С помощью даной формы и js отправляется новое сообщение в чате.

window.Echo.channel('public')
.listen('.message.sent', (e) => {
    $('#messages').append('<p>' + e.message + '</p>');

});

$('#chat_form').submit(function (e) {
e.preventDefault();

$.ajax({
    type: "POST",
    url: '/post',
    data: {
        _token: $('meta[name=csrf-token]').attr('content'),
        message: $('#message').val(),
    },
    success: () => {
        $('#message').val('');
        $('#message').focus();
        // $(".message").scrollTop($(".message").get(0).scrollHeight);
    },
    error: function (error) {
        if (typeof error !== 'undefined')
            alert ('Error! ' + error.responseJSON.message)
    }
});
}); 

Сейчас при добавлении нового сообщения форма опускается вниз, нужно сделать, чтобы форма была закреплена (как в во всех чатах)