ReactStrap: Components get stacked on one another if I use Row and Col

Question

When I don't use Row and Col:

<FormGroup>
                          <InputGroup>
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                                Adresse email du client
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              type="email"
                              id="email"
                              name="email"
                              value={this.state.email}
                              onChange={this.onChange}
                              required
                              disabled={
                                this.state.isClientInformationFieldsDisabled
                              }
                            />
                            <InputGroupAddon addonType="append">
                              <InputGroupText>
                                <i className="fa fa-asterisk"></i>
                              </InputGroupText>
                              <Button
                                color="secondary"
                                onClick={this.onClearClientFields}
                                disabled={
                                  this.state.isClientClearFieldsButtonDisabled
                                }
                              >
                                X
                              </Button>
                            </InputGroupAddon>
                            <Button
                              color="primary"
                              onClick={this.onValidateEmailClient}
                              disabled={
                                this.state.isEmailValidateButtonDisabled
                              }
                              style={{ fontWeight: "bold" }}
                            >
                              Valider l'adresse email
                            </Button>
                          </InputGroup>
                        </FormGroup>

When I use Row and Col:

 <FormGroup>
  <InputGroup>
    <Row>
      <Col lg={"12"}>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            Adresse email du client
          </InputGroupText>
        </InputGroupAddon>
        <Input
          type="email"
          id="email"
          name="email"
          value={this.state.email}
          onChange={this.onChange}
          required
          disabled={
            this.state.isClientInformationFieldsDisabled
          }
        />
        <InputGroupAddon addonType="append">
          <InputGroupText>
            <i className="fa fa-asterisk"></i>
          </InputGroupText>
          <Button
            color="secondary"
            onClick={this.onClearClientFields}
            disabled={
              this.state
                .isClientClearFieldsButtonDisabled
            }
          >
            X
          </Button>
        </InputGroupAddon>
        <Button
          color="primary"
          onClick={this.onValidateEmailClient}
          disabled={
            this.state.isEmailValidateButtonDisabled
          }
          style={{ fontWeight: "bold" }}
        >
          Valider l'adresse email
        </Button>
      </Col>
    </Row>
  </InputGroup>
</FormGroup>

The thing is I am trying to control the width of the form elements with the use of Col and the lg,md props. I had a hunch that using Row and Col will mess-up with the layout of the FormGroup. So I gave it maximum width to see how it would behave and you saw the result.

I do not see why the elements would get stacked on each other if the whole width of the Form is still the maximum width 12. So nothing should change in the layout.

I encountered this problem when I was trying to add another button to the Form and things got messy, so I tried to use the Row and Col components to be in control of each element of the Form.

And then that happened.

Any explanation for this behavior?

---

EDIT 1: I have tried the solution mentioned by Dimitar Spassov with another input group:

   <FormGroup>
                              <Container fluid={true}>
                                <Row>
                                  <Col md={"2"} >
                                    <InputGroup >
                                      <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                          Numéro de téléphone
                                        </InputGroupText>
                                      </InputGroupAddon>
                                    </InputGroup>
                                  </Col>
                                  <Col md={"9"}>
                                    <InputGroup>
                                      <IntlTelInput
                                        containerClassName="intl-tel-input"
                                        inputClassName="form-control"
                                        style={{ width: "100%" }}
                                        block
                                      />
                                    </InputGroup>
                                  </Col>
                                  <Col md={"1"}>
                                    <InputGroup style={{ height: "100%" }}>
                                      <InputGroupAddon
                                        // style={{ height: "100%" }}
                                        addonType="append"
                                      >
                                        <InputGroupText
                                        // style={{ height: "100%" }}
                                        >
                                          <i className="fa fa-asterisk"></i>
                                        </InputGroupText>
                                      </InputGroupAddon>
                                    </InputGroup>
                                  </Col>
                                </Row>
                              </Container>
                            </FormGroup>

The problem that I have now is that there's a padding between the different input groups of the phone number form. I am trying to achieve the result like the form below it. Still haven't found a way to do this. I've added

fluid={true}

to remove the Container external padding (Like explained here). But, it made no change. I have also checked the documentation for the InputGroup to see whether how to delete the paddings but there's no result.

I have also tried using the Bootstrap utilities classes to remove any default padding or margin, but still nothing changed:

 <InputGroup className="ml-0 mr-0 pl-0 pr-0">
                                  <InputGroupAddon addonType="prepend">
                                    <InputGroupText>
                                      Numéro de téléphone
                                    </InputGroupText>
                                  </InputGroupAddon>
                                </InputGroup>

Answer 1

I don't think the right place for Row and Col is inside the InputGroup. You can create several InputGroup elements and wrap them in separate Col-s. This should allow you to control the width of the different components.