Button next to Typography

Question

How can I place a button next to typography tag inside a paper container, aligned to right/end?

<div className={classes.root}>
    <Grid container spacing={3}>
      <Grid item xs={12} md={6}>
        <Paper className={classes.paper}>
          <Typography inline>CPU</Typography>
          <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
        </Paper>
      </Grid>
</div>

Here my styles:

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    padding: theme.spacing(2),
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  }
}));

I'm using the inline attribute of Typography but the button keep going on the next line...many thanks, I'm a newbie.

Answer 1

If you don't mind adding more dom elements.

<div className={classes.root}>
    <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
            <Paper className={classes.paper}>
                <Grid container alignContent="space-between" alignItems="center">
                    <Grid item>
                        <Typography inline>CPU</Typography>
                    </Grid>
                    <Grid item>
                        <IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
                    </Grid>
                </Grid>
            </Paper>
        </Grid>
</div> 

Otherwise you can just change CSS propertie

paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
    display: flex,
    alignContent: 'space-between',
    alignItems: 'center'
}