bug(expansion-panel): description not aligned when mixing rows with and without toggle

[macjohnny]

Reproduction

Open example "Basic expansion panel":
https://material.angular.io/components/expansion/examples

Expected Behavior

The descriptions should be horizontally aligned.

Actual Behavior

The descriptions are not aligned

Environment

• Angular: 10
• CDK/Material: 10.0.2
• Browser(s): Chrome
• Operating System: Windows

[swseverance]

@macjohnny I don't think a PR to fix this is going to be merged any time soon. In the meantime, if you want to fix this with css I would recommend the following:

.mat-content:only-child {
  margin-right: 8px;
}

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

StackBlitz