I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in the next row. I am using mat-form-field, but whenever I add a new field, they all end up being placed next to each other instead of moving to the next line as desired.
Check out the current form image here
component.html
<div class="container">
<div class="row">
<div class="registration-form col-md-6" style="max-width: -webkit-fill-available;">
<div class="main-div" style="width: inherit;text-align: center">
<div class="panel">
<h2> Registration Form</h2>
</div>
<div class="alert alert-danger" *ngIf="errorMsg">
{{errorMsg}}
</div>
<form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
<mat-form-field appearance="outline">
<mat-label>First Name</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Phone Number</mat-label>
<input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input type="password" matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Confirm Password</mat-label>
<input type="password" matInput placeholder="Placeholder">
</mat-form-field>
</form>
<div>
<button type="submit" class="btn btn-primary login" (click)="btnClick();">Register</button>
</div>
</div>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you!