align right (mat-icon) and left (text) on the same line

Question

I'm trying to align my mat-icon on the right side of the same line where "Betrag" is: I tried setting float: right and display: inline-block but they don't work together; could someone help me?

here's the HTML

 <mat-accordion>
  <mat-expansion-panel hideToggle *ngFor="let key of itemCategories">
    <mat-expansion-panel-header *ngIf="items[key].length > 0">
      <mat-panel-title>
        {{key}}
      </mat-panel-title>
      <mat-panel-description>
          {{items[key].length}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div *ngFor="let item of items[key]" (click)="openDialog(item)">
      <mat-divider></mat-divider>
      <p>
        Name: {{item?.name}}<br>
        Betrag: {{item?.price}} 
        <button mat-icon-button  (click)="downloadPdf()">
          <mat-icon color="primary">arrow_circle_down</mat-icon>
        </button>
      </p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

my scss:

mat-panel-description {
  align-items: center;
  justify-content: flex-end;
}

p{
  cursor: pointer;
}

.mat-icon-button{
  float: right;
  clear: both
}

I don't understand why it's on the lower edge/next line, and is there a better way to do it than using the float property?

any help is appreciated!!

Answer 1

did you try to make the container flexbox ?

mat-expansion-panel > div{
    display:flex;
}
.mat-icon-button{
    justify-self: end;
}