Textarea input text is centered vertically

Issue

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?

Solution

  .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>



  

Answered By - Hazrat Gafulov