Невозможно выровнять флажок при использовании углового материала

Question

    <div class="checkbox-password">
        <div>
           <mat-checkbox class="example-margin">Remember me</mat-checkbox>
        </div>
        <div>
           <a routerLink="/forgotPassword" class="createAccount" 
                    routerLinkActive="active"> Forgot Password? </a>
       </div>
   </div>

Используя приведенный выше код, я запомнил себя и забыл пароль рядом друг с другом, мне нужна помощь, чтобы освободить место между ними, я попробовал следующий код CSS. Заранее спасибо.

CSS:

.checkbox-password {
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

Answer 1

Попробуйте дать класс для div и применить стили к div.

Например:

<div class="checkbox-password">
    <div class="remember-me">
       <mat-checkbox class="example-margin">Remember me</mat-checkbox>
    </div>
    <div>
       <a routerLink="/forgotPassword" class="createAccount" 
                routerLinkActive="active"> Forgot Password? </a>
   </div>

А в КСС

.remember-me {
  margin-bottom: 10px;
}