Button only partially clickable error

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.

Attached below is the images of what happens.

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.

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.

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(
        <form onSubmit={this.props.handleSubmit}>
          <FormGroup
            controlId="formName"
            validationState={this.props.formValidation("name")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="name"
                placeholder="Name"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formPhone"
            validationState={this.props.formValidation("phone")}
            className="quote-fields"
          >
              <MaskedFormControl
                type='text'
                name='phone'
                mask='(111)-111-1111 x11111'
                placeholder="Phone"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formEmail"
            validationState={this.props.formValidation("email")}
            className="quote-fields"
          >
              <FormControl
                type="email"
                name="email"
                placeholder="Email"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formAddress"
            validationState={this.props.formValidation("address")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="address"
                placeholder="Address"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
        </form>
    );
  }
}

Obviously CSS is the first place to look for these errors so I have attached the portion of my SCSS file that is relevant here.

%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;

        &:hover{
            color: #1899d1;
        }
        i {
            &: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;
    }
}

If I'm missing any other SCSS/CSS you need to see let me know and I'll upload right away.

Things I have tried:

I have tried changing display to inline-block instead of flex, didn't work. I have tried adding a width to the control and still no go.

I'm not sure what is causing this strange effect. Any ideas are welcome and I'll try them right away.

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.

I should mention I'm testing on a Mac using Google Chrome Version 67.0.3396.87

Attached is an image from the inspector showing the DIV should be just fine in theory.