Position buttons right aligned at the bottom in sidenavbar - html

Question

I have been trying to position two buttons side by side in sidenav at the bottom but they always end up getting after the list ends. I want add and delete button (button bar component) at the bottom in the sidenav right aligned all the time.
Below is my code:
drawer.component.html
<aside class="panel">
<div class="panel-header">
<h2 class="panel-title">Title</h2>
</div>
<div class="panel-body">
<div class="form-group search-wrapper">
<form
[formGroup]="form"
>
<input class="form-control"
[placeholder]=Placeholder>
</form>
</div>
<ul class="list-group">
<li *ngFor="let l of list | async as ts"
class="list-group-item"
>
<span>{{ l.name }}</span>
</li>
</ul>
</div>
<div class="panel-footer">
<buttons-bar></buttons-bar> ---> Newly added component injected here
</div>
</aside>
drawer.component.css
.panel {
box-shadow: 0 0 2px inset $border-primary;
height: 100%;
.panel-title {
color: $color-base-text;
font-size: $font-size-normal;
font-weight: bold;
}
.panel-header{
display: flex;
align-items: center;
padding: $panel-padding-basic;
box-shadow: 0 0 2px inset $border-primary;
}
.panel-header {
background-color: $color-base-bg;
height: 44px;
}
&.panel-block {
.panel-header {
background-color: $color-base-bg-inv;
}
.panel-title {
color: $color-base-text-inv;
}
}
}
.list-group-item {
cursor: pointer;
span {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.search-wrapper {
margin: 0;
input {
outline: 0;
border-radius: 0;
}
}
.button-icon {
margin-left: auto;
}
buttons.component.html
<div class="manipulation-bar">
<div>
<span [tooltip]="tooltip" class="icon button-icon-delete"> delete_forever</span>
</div>
<div>
<span (click)="openDialog()" [tooltip]="tooltip"
class="icon button-icon add"> add </span>
</div>
</div>
buttons.component.css
.manipulation-bar {
display: flex;
justify-content: end ;
align-items: end;
button {
margin: 0 .2vw 0 .2vw;
}
}
.icon {
font-family: 'Material Icons';
font-size: 30px;
}
.button-icon-delete {
color: red;
cursor: pointer;
&:hover {
color: darkred;
}
}
Kindly somebody help me to understand what I am doing wrong.

Answer 1

in your panel div add display: flex; flex-direction: column, and in the panel footer add margin-top: auto; I think it will help you.