I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image.
Despite trying to give each item a Grid Item, they still appear listed one below the other. I aim to have 'skills' and 'home phone' aligned in the same row while 'can also work' and 'cell phone' are placed side by side on another row.
https://i.stack.imgur.com/5OTh2.png
<Grid container spacing={32} justify="center">
<Grid item>
<PersonImage
personId={metadata.id}
height={175}
width={175}
/>
</Grid>
<Grid item style={{ flexGrow: 1 }}>
<Grid
container
spacing={0}
direction="column"
justify="center"
alignItems="stretch">
<Grid item xs={6}>
<Card>
<InfoLabel
label="Skills"
text={profile.skills}
/>
<InfoLabel
label="Can Also Work"
text={profile.work}
/>
<Grid
container
spacing={16}
justify="center">
<Grid item>
<InfoLabel
label="Home Phone"
text={
contactInfo.homePhone
}
/>
<InfoLabel
label="Cell Phone"
text={
contactInfo.mobilePhone
}
/>
<InfoLabel
label="Email"
text={contactInfo.email}
/>
</Grid>
</Grid>
</Card>