In the React MUI V5 sample code below, I am creating a profile page layout with details of a person displayed on the left side of the page in label/value format.
My question is how to position an "IMAGE" entry (assume it's a 300px x 300px profile image) to the right of the values, aligned with the label/values rows but not at the far right, just nicely placed to the right of the information.
I want the rows on the left to remain gap-free and have the image only affect the layout on the right side.
Any advice or guidance would be greatly appreciated.
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function NestedGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={2}>
<Box>Username:</Box>
</Grid>
<Grid item xs={6}>
<Box>Qwerty</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* First Name */}
<Grid item xs={2}>
<Box>First Name:</Box>
</Grid>
<Grid item xs={6}>
<Box>Bob</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* Surname */}
<Grid item xs={2}>
<Box>Surname:</Box>
</Grid>
<Grid item xs={6}>
<Box>Hope</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* DOB */}
<Grid item xs={2}>
<Box>DOB:</Box>
</Grid>
<Grid item xs={6}>
<Box>01/01/2022</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* Occupation */}
<Grid item xs={2}>
<Box>Occupation:</Box>
</Grid>
<Grid item xs={6}>
<Box>IT</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* Status */}
<Grid item xs={2}>
<Box>Status:</Box>
</Grid>
<Grid item xs={6}>
<Box>Married</Box>
</Grid>
<Grid item xs={4}></Grid>
{/* Image */}
<Grid item xs={2}></Grid>
<Grid
item
xs={6}
style={{ display: 'inline-flex', alignItems: 'center' }}
>
<Box>IMAGE</Box>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Box>
);
}