How to use two text fields in one single row with React Material UI?

<Grid container spacing={24}>
  <Grid item xs={4}>
    <TextField
      label="PS"
      value={ps}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="MOOE"
      value={mode}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="CO"
      value={co}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
</Grid>;

to add our TextFields into Grid components.

We set the width relative to the screen’s width with xs to set the width to 4 out of 12 of the screen width for all screen sizes.

The inner Grids has the item prop to make them an item inside the Grid with the container prop.