Angular Material Table with expandable rows - Arrange colums of sub-table under each other

I created an Angular Material table with expandable rows. Instead of a single cell like in the example from the Angular Material docs I want to display a sub-table. Does anyone know how to arrange cells of the same columns below each other? For example, so that the isotope names are aligned below the element names and are not shifted to the right?

Here is the Code:

https://stackblitz.com/edit/angular-material-starter-u5yjae?file=app/app.component.ts

Thanks a lot!

from Angular Material Table with expandable rows - Arrange colums of sub-table under each other