React Bootstrap - Button to be inline with text input with label overhead

Question

My react bootstrap code below results in the submit button being out of line with the input fields which have labels overhead - Is there a way to get the submit button in line with the text fields

    return (
        <Form>
            <Form.Row>
                <Form.Group as={Col} controlId="formGridEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                </Form.Group>

                <Form.Group as={Col} controlId="formGridPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>

                <Form.Group as={Col} controlId="formButton">
                    <Button>Submit</Button>
                </Form.Group>
            </Form.Row>
        </Form>
     );
   }

Answer 1

Use boostrap's d-flex class. You will simply need align-items-end along with it:

      <Form>
        <Form.Row className="d-flex align-items-end">
          <Form.Group as={Col} controlId="formGridEmail">
            <Form.Label>Email</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>

          <Form.Group as={Col} controlId="formGridPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>

          <Form.Group as={Col} controlId="formButton">
            <Button>Submit</Button>
          </Form.Group>
        </Form.Row>
      </Form>

Sandbox: https://codesandbox.io/s/mystifying-pasteur-vwewz?file=/src/App.js

Alternatively, you can use mt-x classes on the button and just push it down with the top margin, but I don't recommend that.