how to align mat-action-row buttons?

Question

I need to align the buttons left center and right, the right button has to expand the expansion panel.

<div>
    <mat-accordion>
        <mat-expansion-panel [(expanded)]="xpandStatus">
            <mat-panel-description>
                <p>I'm visible because I am open</p>
            </mat-panel-description>
        </mat-expansion-panel>
        <mat-action-row>
            <button mat-button>left</button>
            <button mat-button>center</button>
            <button mat-button (click)='xpandStatus=xpandStatus?false:true'>right</button>
        </mat-action-row>
    </mat-accordion>
</div>

Answer 1

add following in css

.mat-action-row {
    place-content: space-between;
}