Textarea input text is centered vertically - html

Question

I got a problem when I make a text area, the text inside is centered vertically and not taking the whole space.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
As you can try it only takes online to enter text but I want to use the whole space.
How can I prevent it?

Answer 1

.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>

Answer 2

If I understand you correctly you want the <textarea> element to not be in the center of the page.
By default textareas, inputs, and buttons are inline elements meaning that they will all happily line up in a row unless they are too long for the page and in that case they will wrap around.
Most modern one page forms elements are not inline but lined up in a column. Hence, when I am styling forms I will often make all input elements display as blocks like this.
input, textarea, button, label {
display: block;
}
Here is your original code with the new changes to the css.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
input, textarea, button, label {
display: block;
}
<section class="row get-in-touch-row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info">
<h2>Get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input class="input-area1" type="text" placeholder="Your Name" required />
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea name="" id="input-area2" cols="10" rows="10" placeholder="Message"></textarea>
<button>SEND MESSAGE</button>
</div>
</section>