The code below represents four components (StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable).

The FilterStatusCode component allows the user to enter search data using TagInput. And if the user enters a lot of tags, then this component increases and stretches two neighbors - Filter and LinkedTable. Thus breaking the structure of the page.

Tell me how to make it so that stretching the FilterStatusCode component does not affect neighboring components.

   return(
    <Grid sx={ContainerStyle}>
        <StyledBreadcrumbs
            deviceId={props.deviceId}
        />
        
        <Grid container spacing={1} sx={{ width: '100vw', height: '10vh' }}>
            <Grid sx={StyleTableContainer}>
                
                <CardContent>
                    <Table>
                        <TableBody>
                            <TableRow>
                                <TableCell>
                                    <FilterStatusCode
                                        isExpanded={isFilterStatusCodeExpanded}
                                        setIsExpanded={setIsFilterStatusCodeExpanded}
                                        setCodes={props.setCodes}
                                    />
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                    </CardContent>
            </Grid>
          
            <Grid container xs={12} sm={7} lg={9} sx={StyleFilterAndLinkedTable}>
                <Filter
                    pageName='Device list'
                    showBackToButton={false}
                    showFilter={true}
                />
                {!isNaN(amountOfPages) && !isNaN(amountOfItems)?
                    <LinkedTable
                        filterData={filterData}
                        applyFilter={applyFilter}
                    />
                : ''}
            </Grid>
        </Grid>
    </Grid>
);

styles:

const ContainerStyle = {
    backgroundColor: '#f6f7f9',
    minHeight: 'calc(100vh - 112px)',   
}

const StyleTableContainer = {
    padding: '20px 10px 0px 30px',
    minWidth: '300px'
}

const StyleFilterAndLinkedTable = {
    padding: '0px 0px 0px 30px'
}