How to set vertical alignment for mdRadioButton directive of Angular Material related to text?

Question

How to set vertical alignment for mdRadioButton directive of Angular Material related to text? I have tried both layout-align and vertical-align style but, the radio button is always align middle related to the text.

here is the plunker

<md-content>
    <md-radio-group ng-model="data"  style="vertical-align:top;">
        <md-radio-button value="a" aria-label="Label 1" style="vertical-align:text-top;">long text 1</md-radio-button>
        <md-radio-button value="b"> long text 2 </md-radio-button>
    </md-radio-group>
</md-content>

Answer 1

Angular Material actually generates a container for the radio button's on/off state and ripple.

<md-radio-button> is the parent and _md-container is the child element you want to modify.

Here's a fork of the plunker with the modified styles:

md-radio-button ._md-container {
    top: 0;
    transform: translateY(0);
}

Hope this helps!

Answer 2

For Angular it can be achieved by:

mat-radio-button .mat-radio-label-content {
    white-space: normal;
}

mat-radio-button .mat-radio-label {
    align-items: normal;
}

Live Example: https://stackblitz.com/edit/angular-qkjhrz?embed=1&file=styles.css