I have a div with a textarea and a submit button, but I would like this div to be positioned in a single location on the screen regardless of what happens.

As you can see, the textarea is in a single screen placement, but every time I send messages it goes down, like it does here

I want this textarea of ​​mine to be positioned at the end of the screen, without going down or up because of the messages

HTML

  <div className='messageText'>
    <textarea  
      name="" 
      id="" 
      cols="30" 
      rows="10"  
      placeholder='Digite sua mensagem...'
      value={message}
      onChange={(e) => setMessage(e.target.value)}
     ></textarea>
    <button onClick={handleSendMessage}>Enviar</button>
  </div>

CSS

.messageText {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 4vh;
}

.messageText textarea {
 border-radius: 6px;
 border: none;
 outline: none;
 width: 50%;
 height: 10vh;
 background-color: #3d3939;
 color: #fff; 
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

>Solution :

Using position: fixed you can achieve what you want

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 100px;
}

.messageText {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
}

.messageText textarea {
  border-radius: 6px;
  border: none;
  outline: none;
  height: 10vh;
  background-color: #3d3939;
  color: #fff;
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

<footer>
  <div class="messageText">
    <textarea name="" id="" cols="30" rows="10" placeholder="Digite sua mensagem..."></textarea>
    <button>Enviar</button>
  </div>
</footer>