How do I put these text and icon side by side?-CodePudding

I have these text and icon which are really far from each other

How can I put the Icon on the right side of the text? Something like this:

Water Jug->

Codesandbox: https://codesandbox.io/s/responsivestack-material-demo-forked-330ogi?file=/demo.js

Codes:

<Grid
      container
      spacing={{ xs: 2, md: 3 }}
      columns={{ xs: 4, sm: 8, md: 12 }}
    >
      {product &&
        product.map((item, i) => (
          <Grid item xs={2} sm={4} md={4} key={i}>
            <Stack direction="row" spacing={2}>
              <ListItemText primary={item.prodName} />
              <ListItemIcon>
                <ArrowForwardIcon style={{ marginLeft: "1px" }} />
              </ListItemIcon>
            </Stack>

          </Grid>
        ))}
    </Grid>

CodePudding user response：

Replace with this:

  <div style={{display: "flex", flexDirection: "row",  alignItems: "center"}}>
     <ListItemText primary={item.prodName} />
     <ListItemIcon>
       <ArrowForwardIcon style={{ marginLeft: "1px" }} />
     </ListItemIcon>
  </div>