Material UI - trying to put paper around columns - reactjs

Question

I am new to material ui and I am getting a bit caught up in its nuances.
I have two columns of fields and I would like to put a single paper border around the columns without messing up the spacing. I also want the paper to be underneath the title. I have the layout as I want it here.
Where do I add the paper? I've seen simple examples where there is just text - when I add paper here it messes up the spacing.
<form className={classes.container} noValidate autoComplete="off">
<Grid container direction="row">
<Grid item xs />
<Grid item >
<Typography variant="h2" className={classes.title} >Some title</Typography>
</Grid>
<Grid item xs />
</Grid>
<Grid container spacing={2} direction="row">
<Grid item xs />
<Grid item xs={4}>
<Grid container>
<TextField
id="first-name"
label="First Name"
className={classes.textField}
value={this.state.firstName}
onChange={this.handleChange("firstName")}
margin="normal"
/>
<TextField
id="last-name"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
onChange={this.handleChange("lastName")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid container>
<TextField
id="address-street"
label="Street Address"
className={classes.textField}
value={this.state.street}
onChange={this.handleChange("street")}
margin="normal"
/>
<TextField
id="address-city"
label="City"
className={classes.textField}
value={this.state.city}
onChange={this.handleChange("city")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs />
</Grid>
</form>

Answer 1

I played around with it a bit more and ultimately got it close to what I was aiming for. I think I over-thought it a bit - I wanted to us grid spacing in the outer grid but ultimately I just set max width and took care of it that way. Sandbox updated with final version.

Answer 2

Did you mean a divider line between the first column and the second?
If that is the case then add <Divider/> between the two <Grid container> component it will add a single line to separate the two columns.
Here is what I did,
TextFields.js
import React from "react";
import PropTypes from "prop-types";
import Grid from '#material-ui/core/Grid';
import Divider from '#material-ui/core/Divider';
import Typography from '#material-ui/core/Typography';
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = theme => ({
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit
}
});
class TextFields extends React.Component {
state = {
firstName: "",
lastName: "",
street: "",
city: ""
};
handleChange = name => event => {
this.setState({ [name]: event.target.value });
};
render() {
const { classes } = this.props;
return (
<form className={classes.container} noValidate autoComplete="off">
<Grid container direction="row">
<Grid item xs />
<Grid item >
<Typography variant="h2" className={classes.title} >Some title</Typography>
</Grid>
<Grid item xs />
</Grid>
<Divider variant="middle" />
<Grid container spacing={2} direction="row">
<Grid item xs />
<Grid item xs={4}>
<Grid container>
<TextField
id="first-name"
label="First Name"
className={classes.textField}
value={this.state.firstName}
onChange={this.handleChange("firstName")}
margin="normal"
/>
<TextField
id="last-name"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
onChange={this.handleChange("lastName")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid container>
<TextField
id="address-street"
label="Street Address"
className={classes.textField}
value={this.state.street}
onChange={this.handleChange("street")}
margin="normal"
/>
<TextField
id="address-city"
label="City"
className={classes.textField}
value={this.state.city}
onChange={this.handleChange("city")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs />
</Grid>
</form>
);
}
}
TextFields.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TextFields);
I just added the Material UI Divider component between the two container Grids you can control its width by using variant props or by using css styles.
But if you meant paper border as Paper component, you can still add it like this code below.
TextFields.js
import React from "react";
import PropTypes from "prop-types";
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
import Typography from '#material-ui/core/Typography';
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = theme => ({
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit
}
});
class TextFields extends React.Component {
state = {
firstName: "",
lastName: "",
street: "",
city: ""
};
handleChange = name => event => {
this.setState({ [name]: event.target.value });
};
render() {
const { classes } = this.props;
return (
<form className={classes.container} noValidate autoComplete="off">
<Grid container direction="row">
<Grid item xs />
<Grid item >
<Typography variant="h2" className={classes.title} >Some title</Typography>
</Grid>
<Grid item xs />
</Grid>
<Paper>x</Paper>
<Grid container spacing={2} direction="row">
<Grid item xs />
<Grid item xs={4}>
<Grid container>
<TextField
id="first-name"
label="First Name"
className={classes.textField}
value={this.state.firstName}
onChange={this.handleChange("firstName")}
margin="normal"
/>
<TextField
id="last-name"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
onChange={this.handleChange("lastName")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid container>
<TextField
id="address-street"
label="Street Address"
className={classes.textField}
value={this.state.street}
onChange={this.handleChange("street")}
margin="normal"
/>
<TextField
id="address-city"
label="City"
className={classes.textField}
value={this.state.city}
onChange={this.handleChange("city")}
margin="normal"
/>
</Grid>
</Grid>
<Grid item xs />
</Grid>
</form>
);
}
}
TextFields.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TextFields);
You can control its height & width by css styles too.