title: How to align react component side-by-side
body: <pre><code>render() {
      return (
        &lt;div className&gt;
          &lt;Select
            label="Gender"
            placeholder=""
            options={['Male', 'Female']}
          /&gt;
          &lt;br/&gt;
          &lt;TextField
            className="outlinedText"
            label="Income"
            onChange={this.getIncome}
          /&gt;
          &lt;br/&gt;
          &lt;p&gt;Are you married?&lt;/p&gt; 
          &lt;Radio
            value="yes"
            checked={this.state.married === "yes"}
            onChange={evt =&gt; this.setState({married: evt.target.value})}&gt;
            Yes
          &lt;/Radio&gt;
          &lt;Radio
            value="no"
            checked={this.state.married === "no"}
            onChange={evt =&gt; this.setState({married: evt.target.value})}&gt;
            No
          &lt;/Radio&gt;
          &lt;br/&gt;
          &lt;p&gt;Have you finished your education?&lt;/p&gt; 
          &lt;Radio
            value="yes"
            checked={this.state.graduated === "yes"}
            onChange={evt =&gt; this.setState({graduated: evt.target.value})}&gt;
            Yes
          &lt;/Radio&gt;
          &lt;Radio
            value="no"
            checked={this.state.graduated === "no"}
            onChange={evt =&gt; this.setState({graduated: evt.target.value})}&gt;
            No
          &lt;/Radio&gt;
          &lt;br/&gt;
          &lt;p&gt;Are you self-employed?&lt;/p&gt; 
          &lt;Radio
            value="yes"
            checked={this.state.graduated === "yes"}
            onChange={evt =&gt; this.setState({graduated: evt.target.value})}&gt;
            Yes
          &lt;/Radio&gt;
          &lt;Radio
            value="no"
            checked={this.state.graduated === "no"}
            onChange={evt =&gt; this.setState({graduated: evt.target.value})}&gt;
            No
          &lt;/Radio&gt;
          &lt;br/&gt;
          &lt;TextField
            className="outlinedText"
            label="Monthly Income($)"
            onChange={this.getIncome}
          /&gt;
          &lt;TextFieldHelperText&gt;What is your monthly income($)?&lt;/TextFieldHelperText&gt;
          &lt;br/&gt;
          &lt;TextField
            className="outlinedText"
            label="Coappliant Income($)"
            onChange={this.getIncome}
          /&gt;
          &lt;TextFieldHelperText&gt;What is your coappliant's monthly income($)?&lt;/TextFieldHelperText&gt;
          &lt;br/&gt;
          &lt;TextField
            className="outlinedText"
            label="Loan Amount($)"
            onChange={this.getIncome}
          /&gt;
          &lt;TextFieldHelperText&gt;What is your loan amount($) in thousands?&lt;/TextFieldHelperText&gt;
          &lt;br/&gt;
          &lt;TextField
            className="outlinedText"
            label="Loan Term"
            onChange={this.getIncome}
          /&gt;
          &lt;TextFieldHelperText&gt;What is your term of loan in months?&lt;/TextFieldHelperText&gt;
          &lt;br/&gt;
          &lt;Select
            label="Credit Score"
            placeholder=""
            options={['300-579', '580-669', '670-739', '740-799', '800-850']}
          /&gt;
          &lt;br/&gt;
          &lt;Select
            label="Property Area"
            placeholder=""
            options={['Urban', 'Semi-urban', 'Rural']}
          /&gt;
          &lt;br/&gt;
  
          &lt;br/&gt;
  
          &lt;br/&gt;
  
          &lt;br/&gt;
  
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>I thought <code>display:inline-block</code> would do it, but it did not change anything.</p>
  
  <p><code>display:flex; flex-direction:row;</code> did not also do the job.</p>
  
  <p>I basically want to create a neat form interface.</p>
  
  <p>Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/LJJ2B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LJJ2B.png" alt="enter image description here"></a></p>