(MUI) Two table on the same row

Question

I am trying to create two parallel tables that stick to each other on the same row. However, the second table is always stacked under the first table. The only idea I could think of is using Grid Item to determine the column span of each table, but I have no idea how to implement it.

Can you use Grid Container over the TableContainer?

const TableCellStyle = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    color: theme.palette.text.dark,
    backgroundColor: theme.palette.success.light,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 12,
  }
}))

const TableRowStyle = styled(TableRow)(({ theme }) => ({
  '&:nth-of-type(odd)': {
    backgroundColor: theme.palette.action.hover, 
  },
  '&:last-child td, &:last-child th': {
    border: 0,
  }
}))

function DataTable() {
    return (

//first table

        <TableContainer 
            component={Paper}
            sx={{
                width:'max-content',
                marginLeft: 'auto',
                marginRight: 'auto'
            }}
        >
            <Table sx={{ minWidth: 400 }}>
                <TableHead>
                    <TableRow>
                        <TableCellStyle>Position</TableCellStyle>
                        <TableCellStyle align="right">Defect Type by AI</TableCellStyle>
                        <TableCellStyle align="right">Tool Decision by AI</TableCellStyle>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                    <TableRowStyle key={row.name}>
                    <TableCellStyle component="th" scope="row">
                        {row.name}
                    </TableCellStyle>
                    <TableCellStyle align="right">{row.Column1}</TableCellStyle>
                    <TableCellStyle align="right">{row.Column2}</TableCellStyle>
                    </TableRowStyle>
                ))}
                </TableBody>

//second table

            </Table>
            <Table sx={{ minWidth: 400 }}>
                <TableHead>
                    <TableRow>
                        <TableCellStyle>Position</TableCellStyle>
                        <TableCellStyle align="right">Defect Type by AI</TableCellStyle>
                        <TableCellStyle align="right">Tool Decision by AI</TableCellStyle>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                    <TableRowStyle key={row.name}>
                    <TableCellStyle component="th" scope="row">
                        {row.name}
                    </TableCellStyle>
                    <TableCellStyle align="right">{row.Column1}</TableCellStyle>
                    <TableCellStyle align="right">{row.Column2}</TableCellStyle>
                    </TableRowStyle>
                ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}