MUI Grid: Prevent grid items from overlapping?

I have an MUI Grid with two Grid Items, each containing a Textbox.

At small screensizes the Textboxes are supposed to be on top of each other like this

and at larger screensizes they are supposed to be next to each other

However, the smallest of the larger screen sizes have the textboxes overlapped

How can I prevent this?

Here is my code:

<Box component="form">
<Grid container spacing={2}>
<Grid item xs={12} md={4} lg={2}>
<TextField
variant="outlined"
className={classes.input}
value={targetRate}
error={isErrTargetRate}
helperText={helperTextTargetRate}
onChange={event => {
setTargetRate(event.target.value);
setIsErrTargetRate(isNaN(event.target.value));
setHelperTextTargetRate(
isNaN(grindRate) ? numericHelperText : " "
);
}}
label={"Target rate"}
required
InputProps={{
inputProps: {
className: classes.inputNumeric,
},
endAdornment: (
<InputAdornment
position="end"
className={classes.inputAdornment}
>
n/day
</InputAdornment>
),
}}
/>
</Grid>
<Grid item xs={12} md={4} lg={2}>
<TextField
variant="outlined"
className={classes.input}
value={time}
error={isErrTime}
helperText={helperTextTime}
onChange={event => {
setTime(event.target.value);
setIsErrTime(isNaN(event.target.value));
setHelperTextTime(isNaN(time) ? numericHelperText : " ");
}}
label={"time"}
required
InputProps={{
inputProps: {
className: classes.inputNumeric,
},
endAdornment: (
<InputAdornment
position="end"
className={classes.inputAdornment}
>
hrs
</InputAdornment>
),
}}
/>
</Grid>
</Grid>
</Box>

Thank you!

The cause of overlapping elements is from putting an element that doesn't fit into a Grid spot that is too small. If you increase your md/lg values the overlapping should go away.

The follow up problem with this is that the space between your inputs will change with screen size due to Grid's responsive nature. This isn't a terrible thing but your user experience may be inconsistent if your users access your site via multiple devices.

The solution is to not rely on grid for responsiveness, flow layout can handle moving elements onto new lines on smaller screens for us. Instead, just use grid to state how much space you want between your elements.

<Grid container item style={{ gap: "0 24px" }}>
<Grid item>
{/* Your text input */}
</Grid>
<Grid item>
{/* Your text input */}
</Grid>
</Grid>

This way we can state how much space we want between our elements no matter the screen size, and the browser will automatically flow the 2nd grid item when the screen can't fit both of your items on the same row.