Multiple ways of arranging views

We could do this using Flexbox concept

<Grid item xs={12}  className={classes.mainheader}>

        <Box display="flex" p={1} bgcolor="background.paper">

        <Box p={1} width="100%" bgcolor="grey.300">

          <Grid container direction={'row'} xs={8}>

            <Avatar>

              {'Un'}

            </Avatar>

            <Paper>

              <Typography> Shiva Messaging </Typography>

              <Typography> sub text </Typography>

            </Paper>

          </Grid>

        </Box>

        <Box p={1} flexShrink={1} bgcolor="grey.300">

          <IconButton aria-label="delete" >

            <DeleteIcon />

          </IconButton>

        </Box>

        <Box p={1} flexShrink={0} bgcolor="grey.300">

          <IconButton aria-label="delete" >

            <DeleteIcon />

          </IconButton>

        </Box>

      </Box>

{/* <Grid container spacing={3}>

          <Grid container direction={'row'} xs={8}>

                <Avatar>

                  {'Un'}

                </Avatar>

                <Paper>

                  <Typography> Shiva Messaging </Typography>

                  <Typography> sub text </Typography>

                </Paper>

          </Grid>

          <Grid item xs={4}>

            <Paper className={classes.paper}>

              <IconButton aria-label="delete" >

                <DeleteIcon />

              </IconButton>

              <IconButton aria-label="delete" >

                <DeleteIcon />

              </IconButton>

              <IconButton aria-label="delete" >

                <DeleteIcon />

              </IconButton>

            </Paper>

          </Grid>

        </Grid> */}

references:

https://material-ui.com/system/flexbox/