Angular Material UI отображает содержимое вкладки в строке

Я пытаюсь стилизовать вкладки Material Ui. Я организовал свой код для общего отображения вкладок, и на каждой вкладке у вас есть 3 основные категории с элементами, которые принадлежат к категории. Как вы можете видеть ниже, это был дизайн, который я имел в виду.

Вот как это выглядит в моем коде. Таким образом, dev Ops должен быть заголовком столбца, а 2 карточки под ним — это элементы, которые ему принадлежат, но тогда вместо того, чтобы показывать следующий столбец рядом с ним, он находится намного ниже него.

Это мой код. Может ли кто-нибудь объяснить мне, как я получаю столбец рядом друг с другом, я пытался играть со строкой и столбцом flex-direction, но не повезло Html:

 <mat-tab-group>
                <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
                    <ng-template matTabContent>
                            <div class="skills-column" *ngFor="let skillcolumn of test$.subtest">
                                <div>
                                    <h3>{{skillcolumn.subcat}}</h3>
                                    <mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
                                        <mat-card-title>{{skillcard.skill}}</mat-card-title>
                                    </mat-card>
                                </div>
                                <mat-divider [vertical]="true"></mat-divider>
                            </div>
                    </ng-template>
                </mat-tab>
            </mat-tab-group>

Sccs

 .mat-tab-group {
                    margin-top: 2%;
                    margin-left: 5%;
                    width: 85%;
                    height: 100%;


                        .skills-column {
                            margin-top: 5%;
                            width:100%;
                            height:100%;
                            display: flex;
                            flex-direction: row;


                            .div {
                                width:50%;


                                .skill-name {
                                    width: 95px;
                                    height: 95px;
                                }
                            }
                        
                    }