Position Element in dependence of another elements width - html

Question

I have an element (a button) and I want to position it below the bottom right corner of a textarea (there is also some more stuff on the right of the textarea. Since the width of that textarea is dependent upon the display size, I want to somehow set the left margin of that button in dependence of the width of the text area. Is that even a possible solution? I'm also using Angular 9.
I hope someone can help me.
This is the html:
<div class="user-container">
<div class="editor">
<h3>Berichte oder schreibe etwas über deinen Tag</h3>
<ckeditor
[editor]="Editor"
[(ngModel)]="editorData"
(ready)="onReady($event)"></ckeditor>
</div>
<div class="date-picker">
<h3>Wähle das Datum</h3>
<mat-form-field>
<mat-label>Wähle das Datum</mat-label>
<input matInput (dateInput)="onDateChange($event.value)" [matDatepicker]="picker" [ngModel]="date" (click)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<app-emoji-rating-scale (emojiSelected)="onEmojiSelected($event)"></app-
emoji-rating-scale>
</div>
<button (click)="onSaveEntry(editorData)" mat-raised-button>Eintrag speichern</button>
<button class="calendar-button" routerLink="/calendar" mat-raised-button>Einträge anzeigen</button>
And this the css (if it helps):
h3 {
font-weight: 500;
}
.user-container {
position: relative;
height:75vh;
max-height: 300px;
}
.editor {
display: inline-block;
width: 75%;
height:70%;
}
.editor h3 {
margin-right: 20px;
vertical-align: top;
}
.date-picker {
display: inline-block;
position:absolute;
top:0px;
width: 20%;
margin-left: 10px;
}
:host ::ng-deep .ck-editor__editable_inline {
display: block;
height:100%;
border: 1px solid var(--ck-color-toolbar-border);
}
app-emoji-rating-scale {
position: absolute;
margin: 100px 0 0 10px;
}
Kind regards
Fonzane