angular material vertical stepper separate label and content section

Question

If i add this css:

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

I am trying to get this stepper to work.

I used angular material design for vertical stepper. How can I make the stepper title on the left and content to right side like the example here.

or is there any module?

Answer 1

Apply below flex properties to your mat-step-header which will only align header to the right

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}