Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS:
.delete{
font-size: 16px;
max-width: 100%;
max-height: 60vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.delete .text-div{
padding: 3px;
}
.delete .button-div{
display: inline-block;
position: relative;
padding: 3px;
/* right: 50%;*/
left: 80%;
}<div class="delete">
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Delete Entry</span>
<button mat-icon-button (click)="onClose()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="text-div">
<span>Are you sure you want to delete this vacation entry?</span>
</div>
<div class="button-div">
<button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
</div>
</div>