Better way to position elements in a grid - reactjs

Question

I try to have a header on my application, where the left item (A) is aligned to the left side of the header, the second item (B) is in the center of the header and the third item is aligned to the right.
I tried a lot and found out that only this worked for me
const AppHeader = () => {
return(
<Grid container
alignItems="baseline"
>
<Grid item xs={4}>
<Grid container justify="flex-start">
A
</Grid>
</Grid>
<Grid item xs={4}>
<Grid container justify="center">
B
</Grid>
</Grid>
<Grid item xs={4}>
<Grid container justify="flex-end">
C
</Grid>
</Grid>
</Grid>
)
}
I think this is a ugly solution, because putting a container inside an item seems so unnecessary to me. Especially if we consider that this container has no grid items. I would really like to tell the item to align its content to a position. It would be better if this solution could be more like his:
const AppHeader = () => {
return(
<Grid container
alignItems="baseline"
>
<Grid item xs={4} justify="flex-start">
A
</Grid>
<Grid item xs={4} justify="center">
B
</Grid>
<Grid item xs={4} justify="flex-end">
C
</Grid>
</Grid>
)
}
Is there a way to do something similar like that?

Answer 1

Assuming you are using material-ui Grid component. You can do something like this
<Grid container direction="row" justify="space-between" alignItems="center">
<div>A</div>
<div>B</div>
<div>C</div>
</Grid>
CodeSandbox Link: https://codesandbox.io/s/small-haze-1wvtr