title: Right Aligned elements not staying on one line
body: <p>I want to place some elements on the left and some the right. But the elements on the right are not staying on line, especially after addition of mat-form-field. I'm getting:</p>
  
  <p><a href="https://i.stack.imgur.com/EFCz5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EFCz5.png" alt="enter image description here"></a></p>
  
  <p>On the right side, the Right Button and the Icon are on the same line, but the mat-form-field does not stay with them on the same line.</p>
  
  <p>My html is:</p>
  
  <pre><code>&lt;div class="mat-table-container"&gt;
      &lt;div class="mat-table-button-wrapper"&gt;
          &lt;div id="left-aligned-wrapper"&gt;
              &lt;button class="btn btn-primary"&gt; 
                  Left Button
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="right-aligned-wrapper"&gt;
              &lt;mat-form-field appearance="standard"&gt;
                &lt;input matInput placeholder="Placeholder"&gt;
              &lt;/mat-form-field&gt;
              &lt;button type="button" mat-button&gt;
                Right Button
              &lt;/button&gt;
              &lt;button class="btn btn-default"&gt;
                &lt;i class="my-icon my-icon-filter"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>.mat-table-container {
    position: relative;
    .mat-table-button-wrapper {
      height: 50px;
      padding-left: 0em;
      padding-top: 1em;
      #left-aligned-wrapper {
        float: left;
      }  
      #right-aligned-wrapper {
        float: right;
      }
    }
  }
  </code></pre>
  
  <p>What could be going wrong here?</p>