The text on the label is overlapping with the text in the textarea. Please add some space between the label and textarea text to avoid this issue.
.group {
position: relative;
margin: 7.5px 0;
}
.group textarea {
background: none;
color: #000;
font-weight: 400;
font-size: 12px;
padding: 25px 10px 10px 10px;
display: block;
width: 100%;
border-radius: 4px;
border: 1px solid #d0d0d0;
}
.group label {
font-weight: normal;
position: absolute;
pointer-events: none;
left: 10px;
transition: 300ms ease all;
}
.smalltextinput {
top: 5px !important;
font-size: 10px !important;
color: #d0d0d0 !important;
}<div class="group">
<textarea oninput="this.style.height = "";this.style.height = this.scrollHeight + "px"" id="information" name="information" class="form-control" cols="30" rows="10">dddd</textarea>
<span class="highlight"></span><span class="bar"></span>
<label class="smalltextinput"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Here the pedagogical reflection must be formulated. </font><font style="vertical-align: inherit;">It may help to ask the following questions: 1. Why did x react like this, 2. What happened prior to the observed action and 3. How does x need to be met</font></font></label>
</div>
<div class="group">
<textarea oninput="this.style.height = "";this.style.height = this.scrollHeight + "px"" id="information3" name="information3" class="form-control" cols="30" rows="10" spellcheck="false" style="height: 179px;"></textarea>
<span class="highlight"></span><span class="bar"></span>
<label class="no-input smalltextinput"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Here the action must be formulated. </font><font style="vertical-align: inherit;">So how did you choose to trade and with what effect.</font></font></label>
</div>