Как отобразить поле на отдельной линии или области, используя угловые 7 форм

Question

Я хочу отображать область имени пользователя и область пароля на разных строках с пробелами между строками.Вот мой HTML-код

Это HTML-код для углового графического интерфейса пользователя.

<mat-card class="card">
<mat-card-content>         
  <!-- CONTENT HERE -->
  <form class="loginform" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <mat-form-field class="full-width"> 
     <div class="form-group">
        <mat-label for="username">Username</mat-label>
        <!-- <label for="username">Username</label>-->
        <input  matInput  placeholder="username"  type="username" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">

        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
            <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
     </div>
   </mat-form-field>  
   <mat-form-field class="full-width">    
    <div class="form-group">
            <mat-label for="password">Password</mat-label>
            <input  matInput  placeholder="password"  type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
          <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
    </div>
   </mat-form-field>  

    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Login</button>

        <a routerLink="/register" class="btn btn-link">Register</a>
    </div>

</form>  
</mat-card-content>
<mat-card-actions>
  <!-- REGISTER BUTTON -->
</mat-card-actions>

В настоящее время я получаю имя пользователя и пароль в одной строке.Я хочу отобразить графический интерфейс в две отдельные строки, с областью между ними.

Когда я использую этот код , имя пользователя и пароль находятся в отдельных строках:

<mat-card-content>
  <form class="my-form">
 <mat-form-field class="full-width">
        <mat-label>First Name</mat-label>
        <input  matInput  placeholder="First name"  name="fname"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Last Name</mat-label>
        <input  matInput  placeholder="Last Name" name="lname"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Address</mat-label>
        <input  matInput  placeholder="Address" name="address"  required>
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Email</mat-label>
        <input  matInput  placeholder="Email" name="email">
     </mat-form-field>
     <mat-form-field class="full-width">
        <mat-label>Password</mat-label>
        <input  matInput  placeholder="Password"  name="password">
     </mat-form-field>

Вот файл css

.loginform{
min-width: 150px;
max-width: 500px;
width: 100%;
}

.full-width {
  width: 100%;

Обновление: когда я вырезал / вставил код ссылки, он также появляется в одной строке вместо двух.

Answer 1

<br/> работал.Спасибо за ответ в комментарии.