Material-UI Checkbox "jumps" in grid - reactjs

Question

The following grid structure in my Material-UI collapsible is my desired layout:
Desired grid layout
I already tried changing the layout by playing with the flex-direction.
https://codesandbox.io/s/epic-nobel-ov48j
When I click on the checkboxes, the last checkbox tends to "jump" from its position away and stacks itself under the other two ones. At the moment I can't find the reason why. You can see the result of this behaviour on this picture:
Undesired grid layout
On smaller screens this behaviour would be okay but especially on larger screens I want the two columns layout where the first one contains two checkboxes and the second contains the third one.

Answer 1

Try this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>Exmaple text</Typography>
<Grid container justify="space-between" direction="row">
<Grid container item justify="space-between" xs={6}>
<Grid container item style={{ alignItems: "center" }} direction="row">
<Grid item xs={6}>Text Supervisor</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
I'm rather new to this js / material-ui / react thing, so you probably might improve it even further.

Answer 2

#Radosław Cybulski: Thank you for your help. With your code and some modifications I was able to get it to work. You don't have to specify direction="row" because it is the default settting.
Now it looks like this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>
Example text
</Typography>
<Grid container justify="space-between">
<Grid container item xs={6} md={3}>
<Grid
container
item
style={{
alignItems: "center",
paddingBottom: "8px",
}}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Supervisor
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Employee
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid
container
item
xs={6}
md={3}
style={{ alignContent: "center" }}
direction="row"
>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
{useTranslation("employee")}
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Hidden smDown>
<Grid container item md={6} />
</Hidden>
</Grid>
</ExpansionPanelDetails>