title: Getting material-ui components to appear inline by overriding style props
body: <p>I am trying to get a check box to appear to the right of the input field "answer input one" I have tried playing with the display property but am really struggling with css layouts in general.<a href="https://i.stack.imgur.com/dS8Uo.png" rel="noreferrer">what I am currently getting</a></p>
  
  <p>Here is the code that is rendering the answer input: </p>
  
  <pre><code>     &lt;div&gt;
    &lt;TextField
    hintText="An informative question title..."
    fullWidth
    floatingLabelText="Question Title"
    value={questionTitle}
    onChange={(e) =&gt; this.props.questionTitleChanged(e.target.value)}
    /&gt;
    &lt;TextField
    floatingLabelText="Answer Input 1"
    onChange={(e) =&gt; this.props.questionInputChanged({
      inputIndex: 0,
      value: e.target.value,
      correct: false
    })}
    value={questionInputs[0].value}
    style={styles.answerField}
    /&gt;
  
    &lt;Checkbox
    onCheck={() =&gt; {
      let correctOrIncorrect = null;
  
      if (questionInputs[0].correct) {
        correctOrIncorrect = false;
      } else { correctOrIncorrect = true; }
  
      this.props.questionInputChanged({
      inputIndex: 0,
      value: null,
      correct: correctOrIncorrect });
    }}
    style={styles.checkbox}
    /&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>And the inline styles are here: </p>
  
  <pre><code>const styles = {
    createQuizContainer: {
      width: '70%',
      margin: 'auto',
      paddingTop: 30,
      paddingBottom: 40
    },
    answerField: {
      width: '70%',
    },
    checkBox: {
      display: 'inline',
    }
  
  };
  </code></pre>
  
  <p>and help would be greatly appreciated! As well as any advice on layouts with css in general!</p>
  
  <p>Thanks.</p>