I came across @material-ui/core issue when creating ListIem with Action. I want to keep the ListItemSecondaryAction on top as ListItemAvatar when the secondary text goes longer, is there any way to overcome it:

<ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </ListItemAvatar>
        <ListItemText
          primary="Brunch this weekend?"
          secondary={
            <React.Fragment>
              <Typography
                component="span"
                variant="body2"
                className={classes.inline}
                color="textPrimary"
              >
                Ali Connors
              </Typography>
              {
                " — I'll be in your neighborhood doing errands this…I'll be in your neighborhood doing errands this…I'll be in your neighborhood doing errands this…"
              }
            </React.Fragment>
          }
        />
        <ListItemSecondaryAction>
          <IconButton edge="end" aria-label="delete">
            <DeleteIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>

As you see here the delete icon is broken when the text goes longer, so I want vertical-align to keep it like the ListItemAvatar. any help will be appreciated, thanks!

CodeSandBox to play around