MUI: how to align text side by side?

Question

I want the numbers and text to line up side-by-side like this picture. But there is a margin to the right of that text (MASTER I 406) , so the numbers don't come in the right place. Currently I'm using transform: 'translateY()' to force the number into position. In this way, the position of the number is broken when the size of the screen is changed. Please tell me how to solve this.

https://codesandbox.io/s/still-morning-0q92mh?file=/src/App.js

Answer 1

You can use the Grid system like the solution below:

import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";

export default function App() {
  return (
    <Card
      sx={{
        borderRadius: 7,
        marginTop: 3
      }}
    >
      <CardContent>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <RiceBowlIcon />
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                marginLeft: 1,
                fontWeight: 600
              }}
            >
              JohnDoe
            </Typography>
            <Typography
              sx={{
                fontSize: 10,
                ml: 4,
                color: "#909090",
                // width: "20%"  // You don't need to specify the width as it wil break the text in two lines
              }}
            >
              MASTER I 100
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography
              sx={{
                float: "right",
                fontSize: 20,
                fontWeight: 540
              }}
            >
              (+10.00%)
            </Typography>
            <Typography
              component="span"
              sx={{
                float: "right",
                fontSize: 20,
                fontWeight: 540
              }}
            >
              10,000
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

To explain a little more, you can create a Grid with two Grid Items. In the left Grid item you have the icon with the texts so it will work as a container and on the right one, the numbers '10.000'. With that way the content of the left Grid shouldn't affect the content of the right one.

Here is the updated sandbox based on your code.

Answer 2

MUI Grid layout is a very powerful system you can use for your customized UI. You need one Grid container with 2 Grid items inside. Your code should be like this:

import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";

export default function App() {
  return (
    <Card
      sx={{
        borderRadius: 7,
        marginTop: 3
      }}
    >
      <CardContent>
        <Grid container sx={{ alignItems: "center" }}>
          <Grid item xs={10}>
            <RiceBowlIcon />
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                fontWeight: 600
              }}
            >
              JohnDoe
            </Typography>
            <Typography
              sx={{
                fontSize: 10,
                color: "#909090",
                ml: 4
              }}
            >
              MASTER I 100
            </Typography>
          </Grid>
          <Grid item xs={2} sx={{ textAlign: "center" }}>
            <Typography
              sx={{
                fontSize: 20,
                fontWeight: 540,
                mr: 2
              }}
            >
              (+10.00%)
            </Typography>
            <Typography
              component="span"
              sx={{
                fontSize: 20,
                fontWeight: 540
              }}
            >
              10,000
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

Answer 3

<ListItemText primary={<div><span>{comment.UserName}</span><span style={{float: 'right'}}>10.10.2022</span></div>} secondary={comment.Comment} />