HTML and CSS horizontal adjustment

I am building a chat functionality in a web page and I'm having trouble with the design of the submit field I have in mind. I will provide you with a picture of my goal, and the code that currently formats them.

And here is the HTML code:

<div class="submitField">
    <textarea   class="submitArea" form="usrform"> </textarea>
    <form action="" id="usrform">
    <input type="submit" class="submitBtn">
    </form>
  </div>

And the CSS code:

.submitField {
    position: fixed;
    bottom: auto;
    width: 100%;
    padding: 10px;
    background-color: red;
        display: inline-block;
}



.submitArea {
    width: 50vh;
    height: 8vh;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    color: black;
        position: relative;
}

.submitBtn {
    color: black;
}

I know using classes on everything might be less than optimal, but what else am I doing wrong right now? Tips on what I need to change to get the New look?