How to keep items alligned in angular material tab

Issue

i am having a problem with keeping items aligned correctly. When i started i had a form that had 2 angular material lists next to each other which took up each 6 units and that worked fine. Then i tried to add a material tab around those 2 lists and was hoping they still show same way but now the show in same tab but underneath each other. So my question why and how can i fix that and get them back on same level and then have a space of 10px between them. Here is a copy of what it looks like now Image

Here is a Stack Blitz sample Code

here is my template code

        <mat-tab-group animationDuration="0ms">
            <mat-tab label="Tracts & Exclusions">


      <mat-card class="col-md-5 space">Tract List 
        <div class="row remove-spinner">
            
            <input class="col-md-6 input" type="number"  #newTractId  matInput placeholder="Enter Tract Number">
            <div [ngClass]="tractId.selectedOptions.selected.length > 0 ? 'remove-question-button icon-space' : 'remove-question-button icon-space disabled-button'" (click)="remove(tractId.selectedOptions.selected)">
                <div class="fa fa-trash fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                </div>
            </div>

            
            <div [ngClass]="newTractId.value.length > 0 ? 'remove-question-button icon-space' : 'remove-question-button icon-space disabled-button'"(click)="addItemToTracts(newTractId.value)">
                <div class="fa fa-plus fa-lg"  viewBox="0 0 448 512">
                </div>
            </div>
       
        </div>
         
        <mat-selection-list  #tractId [multiple]="true">
            <mat-list-option *ngFor="let id of tract_id" [value]="id">
              {{id}}
            </mat-list-option>
          </mat-selection-list>
     
        <mat-list-option *ngFor="let shoe of tract_id" [value]="shoe" >
          {{shoe}}
        </mat-list-option>
      </mat-card>

      <mat-card class="col-md-5 space">Excluded property's
        <mat-selection-list class="col-md-12" #shoes2>
          <mat-list-option *ngFor="let shoe of tract_id">
            {{shoe}}
          </mat-list-option>
        </mat-selection-list>
        </mat-card>
    </mat-tab>
    <mat-tab label="History">Content 2</mat-tab>
   
  </mat-tab-group>
</div>

Solution

You can use flex for that, here is an example I did on your forked stackblitz example

https://stackblitz.com/edit/angular-ivy-feqpjx?file=src%2Fapp%2Ffarm-create%2Ffarm-create.component.html,src%2Fapp%2Ffarm-create%2Ffarm-create.component.scss

I created a div that contained the 2 mat-cards and added a style like:

.list-container{
  display: flex;
  gap: 10px
}

The container would look like:

<div class="list-container">
 ...
<mat-card>...</mat-card>
<mat-card>...</mat-card>
</div>

Answered By - Fernando Morales