So here's the scenario I'm dealing with:
https://i.sstatic.net/4f7AR.png
There seems to be an issue with alignment in the dark blue boxes when they are displayed in a flex container. The top box is not aligned properly with the one next to it. How can this problem be resolved? I want the upper container to always align correctly with its neighboring components, and there may be more than two components next to each other.
Flex container (using Material UI Grid component)
<Box>
<Grid container>
{resultField.fields?.map((blockField, index) => {
return (
<Grid item xs={12} md={6}>
<DarkValueBox label={blockField.label} value={blockField.value} />
</Grid>
);
})}
</Grid>
DarkValueBox Component
export const DarkValueBox = ({ label, value, index }) => {
const classes = useStyles();
return (
<Box sx={{ borderRadius: 5 }}>
<Box
sx={{
backgroundColor: "#0A7BB1",
color: "#fff",
px: 2,
py: 3,
borderRight: "1px solid #fff",
}}
>
<Typography fontWeight={600} variant="subtitle1">
{label}
</Typography>
</Box>
<Box sx={{ px: 2, py: 2, border: "1px solid lightgrey" }}>
<Typography variant="subtitle1">
{value}
</Typography>
</Box>
</Box>
);
};
For reference, you can view the recreated problem on CodeSandbox:
https://codesandbox.io/s/add-material-ui-forked-ge42z?file=/src/index.js