Fix angular checkBox

This UI is produced by following code ....means checkboxes are not aligned properly . They are being displayed on extreme left and extreme right .

<div class="sample">
        <div align="left" class="user-modified-rule">
            <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
            <rule> </rule>
       </div>
        <div class="ruleSpearator"> OR</div>
        <div align="right" class="production-stage-rule">
            <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isOriginalRule"></mat-checkbox>
            <rule> </rule>

        </div>
</div>

and i want the UI as shows in images below I need to align the checkbox along with <rule> as in code

if i change code

<mat-checkbox></mat-checkbox>
<rule></rule>

to

<mat-checkbox>
   <rule></rule>
</mat-checkbox>```

then enitre rule becomes clickable..means any where click on rule , does the checkbox check and uncheck , which i do not want to