Using Material-UI's Grid component, how do I get one cell to take up the remaining horizontal width?

Question

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

const styles = (theme) => ({
  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",
  },
});
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item>
            <InfoIcon />
          </Grid>
        </Grid>

But unfortunately, this renders everything bunched up together

How can I adjust the styles to do what I want?

This is what is displayed based on the answer given by @Mohsen007...这是根据@Mohsen007 给出的答案显示的内容...

Answer 1

Follow the code below:

rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    display: "flex",
},

<Grid container className={classes.rowBody}>
     <Grid item>
         <img height="20" src={require('../../img/apple.svg')} alt="" />
     </Grid>
     <Grid item style={{flex: 1,}}>
         {title}
     </Grid>
     <Grid item>
         <InfoIcon />
     </Grid>
</Grid>