Get React Bootstrap Form to Appear on Same Row

Question

I have a bit of an issue with styling where the forms in React-Bootstrap don't align on the same row, because of the difference in Form Label string length. Here's my JSX:

return 
    (<Card style={{ marginTop: "25px" }}>
      <Card.Body>
        <Row>
          <Col>
            <Form>
              <Form.Group controlId="goalSupremacy"></Form.Group>
              <Form.Label>Goals Suprem</Form.Label>
              <Form.Control
                type="number"
                id="supremacyInput"
                name="supremacy"
                step="0.01"
                value={goalsSupremacy}
                min="-7.5"
                max="7.5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setGoalsSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalGoals"></Form.Group>
              <Form.Label>Goals Total</Form.Label>
              <Form.Control
                type="number"
                id="totalGoalsInput"
                name="totalGoals"
                step="0.01"
                value={totalGoals}
                min="0"
                max="15"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalGoals(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="cornerSupremacy"></Form.Group>
              <Form.Label>Corner Suprem</Form.Label>
              <Form.Control
                type="number"
                id="cornerSupremacyInput"
                name="cornerSupremacy"
                step="0.25"
                value={cornersSupremacy}
                min="-7.5"
                max="7.5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setCornersSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalCorners"></Form.Group>
              <Form.Label>Corners Total</Form.Label>
              <Form.Control
                type="number"
                id="totalCornersInput"
                name="totalCorners"
                step="0.25"
                value={totalCorners}
                min="0"
                max="15"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalCorners(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="bookingsSupremacy"></Form.Group>
              <Form.Label>Cards Suprem</Form.Label>
              <Form.Control
                type="number"
                id="bookingsSupremacyInput"
                name="bookingsSupremacy"
                step="0.01"
                value={bookingsSupremacy}
                min="-5"
                max="5"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setBookingsSupremacy(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="totalBookings"></Form.Group>
              <Form.Label>Cards Total</Form.Label>
              <Form.Control
                type="number"
                id="totalBookingsInput"
                name="totalBookings"
                step="0.01"
                value={totalBookings}
                min="0"
                max="10"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setTotalBookings(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
          <Col>
            <Form>
              <Form.Group controlId="homeRedPercentage"></Form.Group>
              <Form.Label>Home Red %</Form.Label>
              <Form.Control
                type="number"
                id="homeRedInput"
                name="homeRed"
                step="0.01"
                value={homeExpectedRed}
                min="0"
                max="1"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setHomeExpectedRed(e.target.value)}
              ></Form.Control>
            </Form>
            <Form>
              <Form.Group controlId="awayRedPercentage"></Form.Group>
              <Form.Label>Away Red %</Form.Label>
              <Form.Control
                type="number"
                id="awayRedInput"
                name="awayRed"
                step="0.01"
                value={awayExpectedRed}
                min="0"
                max="1"
                style={{
                  width: "82.5px",
                }}
                onChange={(e) => setAwayExpectedRed(e.target.value)}
              ></Form.Control>
            </Form>
          </Col>
        </Row>
        <Row>
          <Col style={{ marginTop: "12.5px" }}>
            <Button
              onClick={() => {
                calculate();
              }}
            >
              Calculate
            </Button>
          </Col>
        </Row>
      </Card.Body>
    </Card>)

And an image of the issue. as you can see, the forms in Home Red and Away Red don't matchup. I'm not great at CSS or styling, so what needs to be done here in order to align the forms? Preferably a responsive solution, if possible...

Answer 1

Make the form 5 rows, 1st and 3rd containing the headings, 2nd and 4th containing the fields, 5th containing the button.

I admit this is a pretty arbitrarily average solution, but it should do what you require, and I can't think how it wouldn't be responsive