I have 3 input fields, the first one I want by itself, but the next two I need side by side. So far I tried to add a className row to the ones that need to be side by side, but they still show up below each other

 {pillTabs.selected === 4 && (
                <div>
                   <div className="row"> //need the ones in this div side by side
                   <Input
                    label="Name"
                    type="text"
                    placeholder="Enter name"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                  <Input
                    label="Label"
                    type="text"
                    placeholder="Enter label"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                   </div>
                </div>
                  )}

Is it possible to get them side by side without using an external library like bootstrap?

I have 3 input fields, the first one I want by itself, but the next two I need side by side. So far I tried to add a className row to the ones that need to be side by side, but they still show up below each other

 {pillTabs.selected === 4 && (
                <div>
                   <div className="row"> //need the ones in this div side by side
                   <Input
                    label="Name"
                    type="text"
                    placeholder="Enter name"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                  <Input
                    label="Label"
                    type="text"
                    placeholder="Enter label"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                   </div>
                </div>
                  )}

Is it possible to get them side by side without using an external library like bootstrap?

• javascript
• css
• reactjs

Share Improve this question Follow edited Feb 1, 2021 at 22:53 asked Feb 1, 2021 at 18:06 user14985872user14985872 3

• This sounds like a styling issue, not a React or JavaScript issue. What styling is being applied to these elements? What CSS rules have you written to change their styling? Looking at the resulting HTML along with the CSS being applied to it is likely to be more useful debugging than just looking at the JSX code. – David Commented Feb 1, 2021 at 18:09
• What about using a TABLE? That's what I normally do – ControlAltDel Commented Feb 1, 2021 at 18:10
• You should look into using material-ui or add bootstrap (only really need the css). Both frameworks have grid systems that make handling spacing and alignment very easy. – Nicholas_Jones Commented Feb 1, 2021 at 19:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use flex from CSS like:

.side-by-side {
  display: flex;
  flex-direction: row;
}

<div>
  <Input1 />
  <div className="side-by-side">
    <Input2 />
    <Input3 />
  </div>
</div>