Previously we created the list of messages for the application, now we are going to create the text box, which is where we will place the messages, it will be made up of two columns, one of them with automatic size so that it occupies only the necessary size; in the fixed-size one, we place the TEXTAREA with the rounded corners:

<div class="col-8" id="right">
    *** CHATS
    <form action="" class="form-message">
        <div class="row">
            <div class="col">
                <textarea  class="form-control rounded-pill"></textarea>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary rounded-circle send-button">
                    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
                        </svg>
                        
                </button>
            </div>
        </div>
    </form>
</div>

And we will use the following CSS:

css/style.css

.form-message{
    margin-top: 15px;
}

.form-message button.send-button svg {
    width: 40px;
    height: 40px;
}
.form-message textarea{
   overflow: hidden;
   resize: none;
}

And we will have:

The next step to carry out is to create a generic list to go from the main process to the web page

Remember that the previous material is part of mi curso completo sobre Electron.js