MUI: how to align text side by side? - css

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

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 2

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 3

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