title: Input text overlaps inside button
body: <p>I have a text type input, and a + button in the right side of it, the way I did this:</p>
  <pre><code>//html
  
  &lt;div class=&quot;input-wrapper&quot;&gt;
      &lt;input type=&quot;email&quot;&gt;
    &lt;button mat-icon-button&gt;
      &lt;mat-icon matSuffix&gt;add_circle_outline&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  
  //css
  .input-wrapper {
    display: flex;
    padding: 0 25px;
  
    button {
      margin-left: -50px;
      margin-top: 17px;
  
      mat-icon {
        font-size: 24px;
      }
    }
  }
  
  </code></pre>
  <p>The problem is , when the text in the input is too long it overlaps the button,is there any way to fix this without moving the button outside of the input?</p>
  <p>Image below..</p>
  <p><a href="https://i.stack.imgur.com/4zy7C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zy7C.png" alt="enter image description here" /></a></p>