title: React Material UI: Make textfields stay in one row
body: <p>I want to make my three text fields occupy the same row always even if I resize the page. My text fields are located inside a card and I've tried to wrap the text fields with grid but no effect.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;CardContent style={{padding: "32px"}}&gt;
                  ....
                  ....
                  &lt;Grid container spacing={24}&gt;
                      &lt;Grid item xs={12}&gt;
                          &lt;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"}}
                          /&gt;
                          &lt;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"}}
                          /&gt;
                          &lt;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"}}
                          /&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/CardContent&gt;
  </code></pre>
  
  <p>Is it possible to achieve what I want? </p>