I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the third item to take up the remaining horizontal space and align to the right (since using "float: right" seems problematic in React). Here's what I have so far:
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>
Unfortunately, this arrangement results in everything being clustered together.
How can I modify the styles to achieve my desired layout?
Edit: This is how it appears following the suggestion provided by @Mohsen007 ...