title: Button only partially clickable error
body: <p>I have a very strange error in which I can't figure out why the button is not clickable for the entire 'red area' of the button.</p>
  
  <p>Attached below is the images of what happens.</p>
  
  <p><a href="https://i.stack.imgur.com/aPfcR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aPfcR.png" alt="Image clickable here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/v5knZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v5knZ.png" alt="Image not clickable here"></a></p>
  
  <p>When I move to the D character in send it becomes immediately not clickable.  Everything for that matter to the right of the D character is not clickable either in the entire red space.</p>
  
  <p>The HTML for the entire form is below.  This is done using React, so I included that code just in case it's related for some reason.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { FormGroup, FormControl, Button } from "react-bootstrap";
  import MaskedFormControl from 'react-bootstrap-maskedinput'
  
  export default class defaultHomeForm extends Component {
  
      render(){
        return(
          &lt;form onSubmit={this.props.handleSubmit}&gt;
            &lt;FormGroup
              controlId="formName"
              validationState={this.props.formValidation("name")}
              className="quote-fields"
            &gt;
                &lt;FormControl
                  type="text"
                  name="name"
                  placeholder="Name"
                  className="form-field"
                  onChange={this.props.setProperty}
                /&gt;
                &lt;FormControl.Feedback /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup
              controlId="formPhone"
              validationState={this.props.formValidation("phone")}
              className="quote-fields"
            &gt;
                &lt;MaskedFormControl
                  type='text'
                  name='phone'
                  mask='(111)-111-1111 x11111'
                  placeholder="Phone"
                  className="form-field"
                  onChange={this.props.setProperty}
                /&gt;
                &lt;FormControl.Feedback /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup
              controlId="formEmail"
              validationState={this.props.formValidation("email")}
              className="quote-fields"
            &gt;
                &lt;FormControl
                  type="email"
                  name="email"
                  placeholder="Email"
                  className="form-field"
                  onChange={this.props.setProperty}
                /&gt;
                &lt;FormControl.Feedback /&gt;
            &lt;/FormGroup&gt;
            &lt;FormGroup
              controlId="formAddress"
              validationState={this.props.formValidation("address")}
              className="quote-fields"
            &gt;
                &lt;FormControl
                  type="text"
                  name="address"
                  placeholder="Address"
                  className="form-field"
                  onChange={this.props.setProperty}
                /&gt;
                &lt;FormControl.Feedback /&gt;
            &lt;/FormGroup&gt;
            &lt;div className="send-btn"&gt;&lt;Button type="submit"&gt;&lt;div className="send-btn-text"&gt;Send &lt;i className="fa fa-angle-right"&gt;&lt;/i&gt;&lt;i className="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/Button&gt;&lt;/div&gt;
          &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Obviously CSS is the first place to look for these errors</strong> so I have attached the portion of my SCSS file that is relevant here.</p>
  
  <pre><code>%send-btn {
      padding: 5px;
      .send-btn-text{
        background-color:red;
      }
      .btn {
          background: transparent;
          border: none;
          font-size: 25px;
          font-weight: 500;
          color: #fff;
          text-transform: uppercase;
          display: flex;
          align-items: center;
  
          &amp;:hover{
              color: #1899d1;
          }
          i {
              &amp;:first-child {
                  padding-left: 5px;
              }
          }
  
      }
  }
  
  %quote-fields {
      padding: 0px 15px 10px;
      margin: 0px;
  
      .form-field {
          background: transparent;
          padding: 12px;
          height: 43px;
          margin-bottom: 12px;
          color: #ffffff;
          border-radius: 2px;
          border: 1px solid #dcdcdc78;
      }
  }
  </code></pre>
  
  <p>If I'm missing any other SCSS/CSS you need to see let me know and I'll upload right away.</p>
  
  <p><strong>Things I have tried:</strong></p>
  
  <p>I have tried changing <strong>display to inline-block instead of flex</strong>, didn't work.  <strong>I have tried adding a width to the control</strong> and still no go.</p>
  
  <p>I'm not sure what is causing this strange effect.  Any ideas are welcome and I'll try them right away.</p>
  
  <p>I have also tried messing with the inspector to just change CSS properties on the fly (live) to see if I can get the area clickable somehow, still no luck.</p>
  
  <p>I should mention I'm testing on a Mac using Google Chrome Version 67.0.3396.87</p>
  
  <p>Attached is an image from the inspector showing the DIV should be just fine in theory.</p>
  
  <p><a href="https://i.stack.imgur.com/dPuhE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dPuhE.jpg" alt="enter image description here"></a></p>