How to have react component sit on top of another component

Question

I'm working with a table that has an expand more option to include more details for each specific row. I'm using a slider to have the table expand. Currently, my ExpandToggle component is within the columns of the table which expands the table to the left and pushes the data. Instead, I would like to have my 'ExpandToggle' component to cover the Fat(g) Carbs(g) and Protein(g) rows and sit on top of the table and not show the data of those 3 rows instead of stretching the table.

I've created a codesandbox to show exactly what i'm working with.

What currently appears:

The table body code:

<TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
              <TableCell align="right">
                <ExpandToggle />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>

Answer 1

As @Aditya mentioned, you shpould override styles for SliderInfo component,implement somethings like tooltip(use position property),like below
SliderInfo.js

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#E2F1F1",
    position: "absolute",
    bottom: "0",
    left: "-360%",
    height: "100%",
    width: "400%"
  },
  listItem: {
    divider: true
  }
}));

demo.js

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  cc: { position: "relative" }
});

 <TableCell
                classes={{
                  root: classes.cc
                }}
                align="right"
              >
                <ExpandToggle />
              </TableCell>

just as an idea, sandbox