<div id="chat" class="chat">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga neque veritatis recusandae eaque, reprehenderit, nihil commodi libero ratione tempora qui sint sapiente amet animi harum nemo consequuntur laborum delectus repudiandae.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga neque veritatis recusandae eaque, reprehenderit, nihil commodi libero ratione tempora qui sint sapiente amet animi harum nemo consequuntur laborum delectus repudiandae.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga neque veritatis recusandae eaque, reprehenderit, nihil commodi libero ratione tempora qui sint sapiente amet animi harum nemo consequuntur laborum delectus repudiandae.</div>
</div>
<form id="form">
  <input type="text" name="message" value="New message">
  <button>send</button>
</form>

.chat {
  width: 500px;
  height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
}
.chat > * {
  margin-block: 5px;
  background: #eee;
}

form.addEventListener("submit", (e) => {
  e.preventDefault()
  chat.insertAdjacentHTML('afterbegin', `<div>${form.elements['message'].value}</div>`)
});