title: How to set only two input fields in a row in Angular Form
body: <p>I am new to Angular development, trying to create a registration form where I need to have two columns in a row , like Firstname ,Lastname in one row followed by Phone,Email and Password,Confirm password.I am using <code>mat-form-field</code>, but when I add a new field all are placed next to each other as shown in below picture, I want them in next line.</p>
  
  <p><a href="https://i.stack.imgur.com/GRo5Z.png" rel="nofollow noreferrer">current form image</a></p>
  
  <pre><code>component.html
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="registration-form col-md-6" style="max-width: -webkit-fill-available;"&gt;
        &lt;div class="main-div" style="width: inherit;text-align: center"&gt;
          &lt;div class="panel"&gt;
            &lt;h2&gt; Registration Form&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="alert alert-danger" *ngIf="errorMsg"&gt;
            {{errorMsg}}
          &lt;/div&gt;
          &lt;form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate&gt;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;First Name&lt;/mat-label&gt;
              &lt;input matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
            &amp;nbsp;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;Last Name&lt;/mat-label&gt;
              &lt;input matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
            &amp;nbsp;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;Email&lt;/mat-label&gt;
              &lt;input matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
            &amp;nbsp;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;Phone Number&lt;/mat-label&gt;
              &lt;input matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
            &amp;nbsp;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;Password&lt;/mat-label&gt;
              &lt;input type="password" matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
            &amp;nbsp;
            &lt;mat-form-field appearance="outline"&gt;
              &lt;mat-label&gt;Confirm Password&lt;/mat-label&gt;
              &lt;input type="password" matInput placeholder="Placeholder"&gt;
            &lt;/mat-form-field&gt;
  
          &lt;/form&gt;
          &lt;div&gt;
            &lt;button type="submit" class="btn btn-primary login" (click)="btnClick();"&gt;Register&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help me out .Thank You.</p>