Expandable rows rendering incorrectly and column resizing lines overlap row data

When attempting to create a mui-datatable with a nested mui-datatable I noticed that the component renders but is misaligned with the parent row data. In addition, when the expandable row is displayed, it gets overlapped by vertical lines used for the column resizing.

## Expected Behavior

The expandable row component should render below the parent row. And the column resize lines should not overlap with the expanded row view.

## Current Behavior

Column resize lines overlap the expanded row display in addition, the lines slide over to other columns. The underlying rendering within the expandable row ui component is not aligned under the datatable row, they get pushed out horizontally.

## Steps to Reproduce (for bugs)

For the expandable row display offset, I created a mui-datatable and in the renderExpandableRow option defined:

const options = {
filter: true,
filterType: "dropdown",
resizableColumns: true,
responsive: "standard",
download: true,
print: false,
draggableColumns: {enabled: true, transitionTime: 1},
selectableRows: false,
rowsPerPageOptions: [5,10,25],
expandableRows: true,
renderExpandableRow: (rowData, rowMeta) => {
console.log(rowData, rowMeta)
const colSpan = rowData.length + 1;
return (

)
},
expandableRowsHeader: false
};

If you click the vertical column resizing bars and drag them, they easily overshoot across to other columns and overlap the other rows in the table.

If you click a dropdown arrow, there underlying table gets shifted from the parent table row.

Sandbox emulating the issues above: https://codesandbox.io/s/mui-datatables-expandable-rows-forked-kmn68?file=/src/ExpandableRowTable.js

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.11.3 |
| MUI-datatables | 3.7.6 |
| React | 16.14.0 |
| browser | chrome |
| etc | |