This the textarea and the two buttons below:
enter image description here

When I expand the textarea, it overlaps the two buttons below:
enter image description here

Here is the HTML code:

` <div class=”file-name-wrapper” [ngClass]=”this.fileName !== undefined && this.fileName !== ‘Send Notification’ ? ‘comments-section-height’ : ‘comments-section'”>

Comments
<textarea rows=”3″ matInput [(ngModel)]=”comments” #comment name=”comments” maxlength=”400″
title=”Comments”>
Max. 400 characters
{{comment.value.length}} / 400

        <div class="bottom-wrapper buttons-wrapper">
            <div>
                <button
                    mat-stroked-button
                    *ngIf="!(this.fileName !== undefined && this.fileName !== 'Send Notification')"
                    id="upload-communication-cancel"
                    title="Cancel"
                    (click)="onSkip()"><span
                    class="skip-button-label">CANCEL</span></button>
                <button
                    mat-stroked-button
                    *ngIf="this.fileName !== undefined && this.fileName !== 'Send Notification'"
                    id="upload-communication-skip"
                    title="Skip"
                    (click)="onSkip()"><span
                    class="skip-button-label">SKIP</span></button>
            </div>

            <div class="buttons-wrapper-deep">
                <button mat-flat-button color="primary" [autofocus]="false"
                    (click)="onSendNotification()" [disabled]="this.selectedReviewers.length < 1">SEND NOTIFICATION</button>
            </div>
        </div>`

Here is the css code:

.bottom-wrapper { margin-top: 55px !important; }

How can I get the margin-top to expand as the textarea expands? Or any other way to keep the textarea from overlapping the two buttons as it expands?

I have tried making the margin-top a percentage value such as

.bottom-wrapper { margin-top: 15% !important; }

but even that does not work