Position buttons right aligned at the bottom in sidenavbar-CodePudding

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 >
  <div >
    <h2 >Title</h2>
  </div>
  <div >
    <div >
      <form
        [formGroup]="form"
        >
      <input 
             [placeholder]=Placeholder>
      </form>
    </div>
    <ul >
      <li *ngFor="let l of list | async as ts"
          
          >
        <span>{{ l.name }}</span>
      </li>
    </ul>
  </div>
  <div >
    <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 >
  <div>
    <span [tooltip]="tooltip" > delete_forever</span>
  </div>
  <div>
    <span (click)="openDialog()" [tooltip]="tooltip"
          > 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.

CodePudding user response：

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.