Html 根据其他元素的宽度定位元素

我有一个元素（一个按钮），我想把它放在文本区域右下角的下方（文本区域右侧还有一些内容。由于文本区域的宽度取决于显示大小，我想根据文本区域的宽度设置按钮的左边距。这是一个可能的解决方案吗？我也使用了Angular 9

我希望有人能帮助我

这是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>

问候

---

Fonzane

请为您的问题提供一些

html

和

css

）当然，给您（很抱歉没有立即提供。只是觉得没有必要。

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;
}