right text align mat-expansion-panel material component

The panel header content are contained in a span which is a flexbox so you can use that to push the contents out to the sides.

view:

<mat-expansion-panel>
<mat-expansion-panel-header class="right-aligned-header">
  <mat-panel-title>
    Cycle ingénieur en informatique
  </mat-panel-title>
  <mat-panel-description>
    2014-2017
  </mat-panel-description>
</mat-expansion-panel-header>    

css (this has to be global css eg. styles.css not in the component style):

.right-aligned-header > .mat-content {
    justify-content: space-between;
}

.mat-content > mat-panel-title, .mat-content > mat-panel-description {
  flex: 0 0 auto;
}

Here is a Stack Blitz demo


Based on this solution: https://github.com/angular/components/issues/10024

.mat-expansion-panel-header-description, .mat-expansion-panel-header-title {
  flex-basis: 0;
}

and reading again the problem, this worked for me:

.mat-expansion-panel-header-description {
  display: flex;
  justify-content: flex-end;
}