title: Problem: mat-form-field stay in same line
body: <p>I try to include multiple filtering to each column in an angular material table.
  But I can't understand why the filter input doesn't move to a new line- under the header?? here is an image --&gt;
  <a href="https://i.stack.imgur.com/drMnq.png" rel="nofollow noreferrer">Angular material table with multiple filltering</a></p>
  <p>Html:</p>
  <pre><code>&lt;div class=&quot;mat-elevation-z8&quot; style=&quot;text-align:right;&quot; dir=&quot;rtl&quot;&gt; 
      &lt;table mat-table [dataSource]=&quot;dataSource&quot; matSort&gt;
  
          &lt;!-- Name Column --&gt;
          &lt;ng-container matColumnDef=&quot;nvOperatorName&quot;&gt;
              &lt;th class=&quot;header&quot;  mat-header-cell *matHeaderCellDef mat-sort-header&gt;
                   שם
                 &lt;mat-form-field class=&quot;filter&quot; floatLabel=&quot;never&quot;&gt;
                      &lt;mat-label&gt;Search&lt;/mat-label&gt;
                      &lt;input matInput [formControl]=&quot;nameFilter&quot; &gt;
                  &lt;/mat-form-field&gt;
               &lt;/th&gt;
             
              &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.nvOperatorName}} &lt;/td&gt;
        
          &lt;/ng-container&gt;
  
          
          &lt;!-- Contact Name Column --&gt;
          &lt;ng-container matColumnDef=&quot;nvContactPerson&quot;&gt;
              &lt;th  style=&quot;width: 10%;size: 100px;&quot; mat-header-cell *matHeaderCellDef mat-sort-header&gt; שם איש קשר 
                  &lt;mat-form-field class=&quot;filter&quot; floatLabel=&quot;never&quot;&gt;
                      &lt;mat-label&gt;Search&lt;/mat-label&gt;
                      &lt;input matInput [formControl]=&quot;ContactNameFilter&quot; &gt;
                  &lt;/mat-form-field&gt;
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.nvContactPerson}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          ...
  
          &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  
          &lt;!-- Row shown when there is no matching data. --&gt;
          &lt;tr class=&quot;mat-row&quot; *matNoDataRow&gt;
              &lt;td class=&quot;mat-cell&quot; colspan=&quot;4&quot;&gt;No data matching the filter &quot;{{input.value}}&quot;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;mat-paginator [pageSizeOptions]=&quot;[5, 10, 25, 100]&quot;&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>  table {
      width: 100%;
      /* overflow-x: auto;
      overflow-y: hidden;
      min-width: 500px; */
  } 
  th.mat-header-cell {
      text-align: left;
      max-width: 300px;
  }
   
  input.matInput{
    direction: rtl;
  }
  
  p {
    font-family: Lato;
  }
  
  
  .header {
    padding: 5px;
  }
  
  .filter {
    display: block;
  }
  
  </code></pre>
  <p>Please help me if u can or another idea for multiple filtering on table...</p>