You can change the alignment of the items in the CardActions component. Since it uses flexbox as its display, you can use any of the justify-content values. Here's an updated version that aligns the action buttons to the right of the card:
const styles = theme => ({ card: { maxWidth: 400 }, actions: { justifyContent: 'flex-end' }});const PerformingActions = withStyles(styles)(({ classes }) => ( <Card className={classes.card}> <CardHeader title="Ron Swanson" subheader="Legend" avatar={ <Avatar> <PersonIcon /> </Avatar> } /> <CardContent> <Typography variant="caption">Joined 2009</Typography> <Typography> Some filler text about the user. There doesn't have to be a lot - just enough so that the text spans at least two lines. ...
