I am struggling with positioning a div containing a textarea and a submit button on my screen. I want the div to stay in a fixed location regardless of any actions that may occur.
https://i.sstatic.net/beZJi.png
Currently, the textarea moves up or down every time I send a message, causing it to shift from its original position.
https://i.sstatic.net/U0KiQ.png
My goal is to keep this textarea at the bottom of the screen without being affected by incoming 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;
}