Behavior change with mat-card v16.0.1

I have an Angular Material Card. The header is vertical on the left side and the content is on the right side.

Since I updated my Angular version and the Angular Material library to 16, the header and content are displayed on top of each other.

HTML:

<mat-card>
    <mat-card-header>
        Vertical Title
    </mat-card-header>
    <mat-card-content>
        <p>
            Lorem ipsum ...
        </p>
    </mat-card-content>
</mat-card>

CSS:

mat-card {
    width: 50%;
    display: flex;
}

mat-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    text-align: center;
}

mat-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

The changelog shows that some changes have been made to the mat-card. Is there another way to display the elements side by side?

StackBlitz: https://stackblitz.com/edit/qppvij

I have found a workaround. Instead of custom styling you can use a "mat-card-title-group" in which elements like "mat-card-header", "mat-card-title" or "mat-card-subtitle" can be grouped.

A usual html element such as a paragraph or image is automatically placed next to the title within the title-group.

HTML:

<mat-card>
    <mat-card-title-group>
        <mat-card-title>
            Vertical Title
        </mat-card-title>
        <p>
            Lorem ipsum ...
        </p>
    </mat-card-title-group>
</mat-card>