How to label both sides of a mat-slide-toggle control in Angular/Material 8?

I'm using mat-slide-toggle on a settings screen to show various "this or that" options, e.g.:

<div class="row">
    <div class="column">
        Automatically adjust display to screen
    </div>
    <div class="column">
        <mat-label>Off&nbsp;</mat-label>
        <mat-slide-toggle formControlName="autoLayout">On</mat-slide-toggle>
        <mat-label>&nbsp;On</mat-label>
    </div>
</div>

<div class="row">
    <div class="column">
        Choose preferred manual layout
    </div>
    <div class="column">                            
        Landscape&nbsp;<mat-slide-toggle formControlName="portrait"></mat-slide-toggle>&nbsp;Portrait
    </div>
</div>

Which looks like this:

Note that the "On" which is part of the mat-slide-toggle is styled slightly differently to the Off/On which are outside of the control.

Is there any way to replicate the internal label, on the left-hand side of the toggle AND the right-hand side, without having to do a load of CSS jiggery-pokery, which I've tried and failed to do already?

Add class mat-slide-toggle-content (which is defined by angular material and applied to the label) to your secondary label and also append following three CSS rules to the label.

vertical-align: top;
display: inline-block;
line-height: 24px; // this is defined in .mat-slide-toggle