title: Using Material-UI's Grid component, how do I get one cell to take up the remaining horizontal width?
body: <p>I'm trying to use material-ui's Grid component in my React 16.13.0 application.  I want to have a row with three items.  The first two items should only take up as much space as they need to (I don't want to hard code pixel values if possible).  I would like the third item to take up the remaining horizontal space and float the furthest to the rigth (I discovered React doesn't like "float: right" as a style, though).  I have this</p>
  
  <pre><code>const styles = (theme) =&gt; ({
    root: {
      textAlign: "left",
      margin: theme.spacing(2),
      paddingBottom: theme.spacing(1),
      color: theme.color.secondary,
    },
    cardHeader: {
      paddingBottom: theme.spacing(0),
    },
    cardContent: {
      width: "100%",
      paddingBottom: theme.spacing(1),
    },
    rowBody: {
      width: "100%",
      flexWrap: "nowrap",
      alignItems: "center",
    },
  });
  ...
        &lt;CardContent className={classes.cardContent}&gt;
          &lt;Grid container className={classes.rowBody}&gt;
            &lt;Grid item&gt;
              &lt;img height="20" src={require('../../img/apple.svg')} alt="" /&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              {title}
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              &lt;InfoIcon /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>But unfortunately, this renders everything bunched up together</p>
  
  <p><a href="https://i.stack.imgur.com/LN1CC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LN1CC.png" alt="enter image description here"></a></p>
  
  <p>How can I adjust the styles to do what I want?</p>
  
  <p><b>Edit:</b> This is what is displayed based on the answer given by @Mohsen007 ...</p>
  
  <p><a href="https://i.stack.imgur.com/aJtZi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aJtZi.png" alt="enter image description here"></a></p>