React material-ui and reactstrap form inline with button new line

Question

How can I have the form elements inline, but the submit button in a new line?

import {
    Button,
    Form,
    Label,
    Input,
    Card,
    CardText,
    CardBody,
    CardTitle,
    Col, Badge
} from 'reactstrap';
import { 
    FormControlLabel, Checkbox, FormGroup
} from '@material-ui/core';

...

<Form inline>
    <FormGroup className="mr-10 mb-10">
        <Label for="initLateFee" className="mr-sm-10">Initial Late Fee</Label>
        <Input type="number" name="initLateFee" id="initLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="dailyLateFee" className="mr-sm-10">Daily Late Fee</Label>
        <Input type="number" name="dailyLateFee" id="dailyLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="applyOn" className="mr-sm-10">Apply On Day</Label>
        <Input type="number" name="applyOn" id="applyOn" placeholder="0" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="maxLateFee" className="mr-sm-10">Max Late Fee</Label>
        <Input type="number" name="maxLateFee" id="maxLateFee" placeholder="0.00" />
    </FormGroup>
    <div className="row">
        <Button type="submit" color="primary">Update</Button>
    </div>
</Form>

I would like to have the "submit" button in a new line, but belonging to the <Form>

Answer 1

If you want multiple inputs on a single horizontal row, use the grid system.

<Form>
  <div className="row">
    <div className="col">
      <FormGroup>
        <Label>First Name</Label>
        <Input name="firstName" />
      </FormGroup>
    </div>
    <div className="col">
      <FormGroup>
        <Label>Last Name</Label>
        <Input name="lastName" />
      </FormGroup>
    </div>
  </div>
  <Button type="submit">
    Submit
  </Button>
</Form>