title: Angular 5 material design full-width inputs
body: <p>I'm new to angular 5, so I need to make a form with full-width inputs, and I want to every input take the whole width of its container, however, it only takes up half of it.</p>
  
  <p>Here is <a href="https://i.stack.imgur.com/5qCDO.png" rel="noreferrer">what I'm getting</a></p>
  
  <p>I'm using angular material 
  and here is my code: </p>
  
  <pre><code>&lt;mat-grid-tile class="add-product-content" [rowspan]="4"&gt;
      &lt;form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()"&gt;
          &lt;mat-accordion &gt;
              &lt;mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" &gt;
                &lt;mat-expansion-panel-header&gt;
                  &lt;mat-panel-title&gt;Personal data&lt;/mat-panel-title&gt;
                &lt;/mat-expansion-panel-header&gt;
                &lt;div class="input-container"&gt;
                    &lt;div class="flex-item"&gt;
                        &lt;mat-form-field&gt;
                            &lt;input matInput placeholder="First name"&gt;
                        &lt;/mat-form-field&gt;
                    &lt;/div&gt;
                    &lt;div class="flex-item"&gt;
                        &lt;mat-form-field&gt;
                          &lt;input matInput type="number" min="1" placeholder="Age"&gt;
                        &lt;/mat-form-field&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;mat-action-row&gt;
                    &lt;button mat-button color="primary" (click)="nextStep()"&gt;Next&lt;/button&gt;
                &lt;/mat-action-row&gt;
             &lt;/mat-expansion-panel&gt;
  
             &lt;mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" &gt;
                &lt;mat-expansion-panel-header&gt;
                    &lt;mat-panel-title&gt;Personal data&lt;/mat-panel-title&gt;
                &lt;/mat-expansion-panel-header&gt;
  
                &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="First name"&gt;
                &lt;/mat-form-field&gt;
                &lt;mat-form-field&gt;
                    &lt;input matInput type="number" min="1" placeholder="Age"&gt;
                &lt;/mat-form-field&gt;
                &lt;mat-action-row&gt;
                    &lt;button mat-button color="warn" (click)="prevStep()"&gt;Previous&lt;/button&gt;
                    &lt;button mat-button color="primary" (click)="nextStep()"&gt;Next&lt;/button&gt;
                &lt;/mat-action-row&gt;
            &lt;/mat-expansion-panel&gt;
        &lt;/mat-accordion&gt;
        &lt;button mat-raised-button type="submit" class="actionButton"&gt;add&lt;/button&gt;
      &lt;/form&gt;
  &lt;/mat-grid-tile&gt;
  </code></pre>
  
  <p>Thanks.</p>