How to align react component side-by-side

Question

render() {
    return (
      <div className>
        <Select
          label="Gender"
          placeholder=""
          options={['Male', 'Female']}
        />
        <br/>
        <TextField
          className="outlinedText"
          label="Income"
          onChange={this.getIncome}
        />
        <br/>
        <p>Are you married?</p> 
        <Radio
          value="yes"
          checked={this.state.married === "yes"}
          onChange={evt => this.setState({married: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.married === "no"}
          onChange={evt => this.setState({married: evt.target.value})}>
          No
        </Radio>
        <br/>
        <p>Have you finished your education?</p> 
        <Radio
          value="yes"
          checked={this.state.graduated === "yes"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.graduated === "no"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          No
        </Radio>
        <br/>
        <p>Are you self-employed?</p> 
        <Radio
          value="yes"
          checked={this.state.graduated === "yes"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.graduated === "no"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          No
        </Radio>
        <br/>
        <TextField
          className="outlinedText"
          label="Monthly Income($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your monthly income($)?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Coappliant Income($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your coappliant's monthly income($)?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Loan Amount($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your loan amount($) in thousands?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Loan Term"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your term of loan in months?</TextFieldHelperText>
        <br/>
        <Select
          label="Credit Score"
          placeholder=""
          options={['300-579', '580-669', '670-739', '740-799', '800-850']}
        />
        <br/>
        <Select
          label="Property Area"
          placeholder=""
          options={['Urban', 'Semi-urban', 'Rural']}
        />
        <br/>

        <br/>

        <br/>

        <br/>

      </div>
    )
  }
}

Here is how my react render looks like. I wanted to make it align side-by-side. However, I am not sure what style I have to use and what is a good practice to do such a task. Below is the image and the sketch is something that I actually want.

I thought display:inline-block would do it, but it did not change anything.

display:flex; flex-direction:row; did not also do the job.

I basically want to create a neat form interface.

Thanks.

Answer 1

I suggest you restructure a bit your render function and add some css to it, like this:

Render:

<div className='myForm'>
    <Select
      label="Gender"
      placeholder=""
      options={['Male', 'Female']}
    />

    <TextField
      className="outlinedText"
      label="Income"
      onChange={this.getIncome}
    />
    <div>
      <p>Are you married?</p> 
      <Radio
        value="yes"
        checked={this.state.married === "yes"}
        onChange={evt => this.setState({married: evt.target.value})}>
        Yes
      </Radio>
    </div>
    <Radio
      value="no"
      checked={this.state.married === "no"}
      onChange={evt => this.setState({married: evt.target.value})}>
      No
    </Radio>
    <div>
      <p>Have you finished your education?</p> 
      <Radio
        value="yes"
        checked={this.state.graduated === "yes"}
        onChange={evt => this.setState({graduated: evt.target.value})}>
        Yes
      </Radio>
    </div>
    <Radio
      value="no"
      checked={this.state.graduated === "no"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      No
    </Radio>
    <div>
    <p>Are you self-employed?</p> 
    <Radio
      value="yes"
      checked={this.state.graduated === "yes"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      Yes
    </Radio>
   </div>
    <Radio
      value="no"
      checked={this.state.graduated === "no"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      No
    </Radio>

    <TextField
      className="outlinedText"
      label="Monthly Income($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your monthly income($)?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Coappliant Income($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your coappliant's monthly income($)?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Loan Amount($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your loan amount($) in thousands?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Loan Term"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your term of loan in months?</TextFieldHelperText>

    <Select
      label="Credit Score"
      placeholder=""
      options={['300-579', '580-669', '670-739', '740-799', '800-850']}
    />

    <Select
      label="Property Area"
      placeholder=""
      options={['Urban', 'Semi-urban', 'Rural']}
    />

As you can see I removed all of your br tags and everywhere where you had p tag and a radio, I wraped those two elements inside one div. Now CSS:

.myForm {
  max-width: 300px; //this is arbitrary, you need to find here what is the best value for you
  display: flex;
  flex-wrap: wrap;
}

This css will arrange your elements the way you want to be. It is quite possible that you would need to tweak a bit your css because I could not make codesendbox for your question since I don't know what UI are you using, semnatic, material, or someting else. But, this is at least start for you.