reactjs – Align text second line in material UI / CSS

I have a problem adjusting the texts on the second line. It must be in line with the first line.

Codesandbox CLICK HERE

   <Card sx={{ maxWidth: 200 }}>
      <CardMedia
        component="img"
        height="140"
        image="/static/images/cards/contemplative-reptile.jpg"
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Box>
          <Typography variant="body2" color="error">
            &bull; Hello how are you doing there?
          </Typography>
        </Box>
        <Box>
          <Typography variant="body2" color="error">
            &bull; Hi how are you doing there?
          </Typography>
        </Box>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>

Leave a Comment