how to use two text fields in one single row react js
<Grid container spacing={24}>
<Grid item xs={4}>
<TextField
id="re_ps"
label="PS"
value={this.state.re_pe_value}
onChange={this.re_ps_handleChange('value')}
margin="normal"
type="number"
margin = "dense"
variant = "filled"
style={{paddingRight: "20px", width: "170px"}}
/>
</Grid>
<Grid item xs={4}>
<TextField
id="re_mooe"
label="MOOE"
value={this.state.re_mooe_value}
onChange={this.re_mooe_handleChange('value')}
margin="normal"
type="number"
margin = "dense"
variant = "filled"
style={{paddingRight: "20px", width: "170px"}}
/>
</Grid>
<Grid item xs={4}>
<TextField
id="re_co"
label="CO"
value={this.state.re_co_value}
onChange={this.re_co_handleChange('value')}
margin="normal"
type="number"
margin = "dense"
variant = "filled"
style={{paddingRight: "20px", width: "170px"}}
/>
</Grid>
</Grid>