use : position: relative

checkout the doc here :
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning

fiddle : https://jsfiddle.net/Lgj3n65s/

The problem was small. All I needed to do was change position: relative to position: absolute. It was a minor detail that I did not notice before posting my question.

Thank you, everyone!

Add vertical-align: top in XPContain class

Problem Statement

Whenever I resize the textarea in my Angular website, all the elements move down, which is something I do not want.

---

A Technical Caveat

I want the user to be able to resize the textarea by themselves. It is something that must be a part of the functionality of the website.

---

Code

HTML for the Textarea

<mat-form-field class="XPContain" appearance="outline">
    <textarea matInput cols="30" rows="10" placeholder="Describe your past experience"></textarea>
</mat-form-field>

CSS for the Textarea

.XPContain {
  position: relative;
  left: 400px;
}

---

Images of the Problem

When the textarea is not resized by the user:

When the textarea is resized by the user:

---

Explanation of Images

As you can see, whenever the user resizes the textarea, it moves all the other elements down.

---

Expected Results

I want the textarea to resize independently from all the other elements and not move any elements.

---

Actual Results

The textarea moves all the elements down whenever resized.