How to right align angular Material vertical tabs

Question

I have vertical material tabs as shown in below image.

I want to position those tabs to right and content to left side. How can I do that.

Stackblitz demo

I have achieved vertical tabs using css flex.( using below css)

:host /deep/ .mat-tab-group {
  flex-direction: row;
}
:host /deep/ .mat-tab-header {
  border-bottom: none;
}
:host /deep/ .mat-tab-header-pagination {
  display: none !important;
}
:host /deep/ .mat-tab-labels {
  flex-direction: column;
}
:host /deep/ .mat-ink-bar {
  height: 100%;
  left: 98% !important;
}
:host /deep/ .mat-tab-body-wrapper {
  flex: 1 1 auto;
}

I just want to have the tabs to the right side of the page

Answer 1

You can use flex-direction: row-reverse; instead of row . It make tabs position to the right edge, also for the vertical bar. If you want the width of bar is always 2% and in between content & label (like in example), then use:

:host /deep/ .mat-ink-bar {
  height: 100%;
  width: 2% !important;
}

Full code & stackblitz demo :

:host /deep/ .mat-tab-group {
  flex-direction: row-reverse;
}
:host /deep/ .mat-tab-header {
  border-bottom: none;
}
:host /deep/ .mat-tab-header-pagination {
  display: none !important;
}
:host /deep/ .mat-tab-labels {
  flex-direction: column;
}
:host /deep/ .mat-ink-bar {
  height: 100%;
  width: 2% !important;
}
:host /deep/ .mat-tab-body-wrapper {
  flex: 1 1 auto;
}