title: How Do I Create A 2 Column Form WIth React Material-UI?
body: <p>I am creating a react form with material-ui.</p>
  
  <p>I would like the form to be a fixed 2 column view and not flow based on the browser size so it is always like this:</p>
  
  <pre><code>|First Name      |Last Name|
  |Street Address  |City     |
  </code></pre>
  
  <p>And not end up like</p>
  
  <pre><code>|First Name      |Last Name|  Street Address  |City     |
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/0q7kw76nyl" rel="noreferrer">https://codesandbox.io/s/0q7kw76nyl</a></p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import { withStyles } from "@material-ui/core/styles";
  import TextField from "@material-ui/core/TextField";
  
  const styles = theme =&gt; ({
    textField: {
      marginLeft: theme.spacing.unit,
      marginRight: theme.spacing.unit
    }
  });
  
  class TextFields extends React.Component {
    state = {
      firstName: "",
      lastName: "",
      street: "",
      city: ""
    };
  
    handleChange = name =&gt; event =&gt; {
      this.setState({ [name]: event.target.value });
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        &lt;form className={classes.container} noValidate autoComplete="off"&gt;
          &lt;TextField
            id="first-name"
            label="First Name"
            className={classes.textField}
            value={this.state.firstName}
            onChange={this.handleChange("firstName")}
            margin="normal"
          /&gt;
  
          &lt;TextField
            id="last-name"
            label="Last Name"
            className={classes.textField}
            value={this.state.lastName}
            onChange={this.handleChange("lastName")}
            margin="normal"
          /&gt;
  
          &lt;TextField
            id="address-street"
            label="Street Address"
            className={classes.textField}
            value={this.state.street}
            onChange={this.handleChange("street")}
            margin="normal"
          /&gt;
  
          &lt;TextField
            id="address-city"
            label="City"
            className={classes.textField}
            value={this.state.city}
            onChange={this.handleChange("city")}
            margin="normal"
          /&gt;
        &lt;/form&gt;
      );
    }
  }
  
  TextFields.propTypes = {
    classes: PropTypes.object.isRequired
  };
  
  export default withStyles(styles)(TextFields);
  </code></pre>