how to use two text fields in one single row react js

1<Grid container spacing={24}>
2    <Grid item xs={4}>
3        <TextField
4            id="re_ps"
5            label="PS"
6            value={this.state.re_pe_value}
7            onChange={this.re_ps_handleChange('value')}
8            margin="normal"
9            type="number"
10            margin = "dense"
11            variant = "filled"
12            style={{paddingRight: "20px", width: "170px"}}
13        />
14    </Grid>
15    <Grid item xs={4}>
16        <TextField
17            id="re_mooe"
18            label="MOOE"
19            value={this.state.re_mooe_value}
20            onChange={this.re_mooe_handleChange('value')}
21            margin="normal"
22            type="number"
23            margin = "dense"
24            variant = "filled"
25            style={{paddingRight: "20px", width: "170px"}}
26        />
27    </Grid>
28    <Grid item xs={4}>
29        <TextField
30            id="re_co"
31            label="CO"
32            value={this.state.re_co_value}
33            onChange={this.re_co_handleChange('value')}
34            margin="normal"
35            type="number"
36            margin = "dense"
37            variant = "filled"
38            style={{paddingRight: "20px", width: "170px"}}
39        />
40    </Grid>
41</Grid>
42