Take a look at this React code using MUI. It's designed to create a Card that showcases Character Information.
const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => {
return (
<Card sx={{ maxWidth: 256, borderRadius: 4 }}>
<Box
component="a"
href={`/#/${characterKey}`}
display="flex"
position="relative"
sx={{
"&::before": {
content: '""',
display: "block",
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
opacity: 0.7,
backgroundImage: `url(${bannerImgUrl})`,
backgroundPosition: "center",
backgroundSize: "cover",
},
}}
width="100%"
>
<Box
flexShrink={1}
sx={{ maxWidth: { xs: "40%", lg: "40%" } }}
alignSelf="flex-end"
display="flex"
flexDirection="column"
zIndex={1}
>
<Box
component="img"
src={iconImgUrl}
width="100%"
height="auto"
maxWidth={256}
sx={{ mt: "auto" }}
/>
</Box>
</Box>
<CardContent>
<Typography variant="h5" component="div">
{characterName}
</Typography>
<Chip
label={characterChipInfo}
size="small"
/>
</CardContent>
</Card>
);
};
This is the visual output:
https://i.stack.imgur.com/MmRco.jpg
I'm trying to place the chip component (displaying as CRYO in the image and represented by characterChipInfo in the code above) on the same line as the characterName, with some space between them like a space-between flexbox layout. However, my attempts to use the Box component with flex-box and
justifyContent="space-between"Typography and Chip elements have not been successful. I've also experimented with changing the Typography's display property to inline-flex and inline-block, which puts them on the same line but still doesn't work with the Box's justifyContent=space-between.