I can't seem to override the defaults to vertically align the checkbox relative to the checkbox label. Searched for a while but nothing has worked. See example image:

[![enter image description here](https://i.stack.imgur.com/ObePI.png)](https://i.stack.imgur.com/ObePI.png)

Should be like:

[![enter image description here](https://i.stack.imgur.com/o4xGp.png)](https://i.stack.imgur.com/o4xGp.png)

Have tried the following:

```
.mat-checkbox-inner-container {
    margin: none;
}

```

HTML:

```
<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

```