I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they ended up being displayed one below the other inside the tab. So, my question is why did this happen and how can I resolve it to get them back on the same level with a spacing of 10px between them?
Here you can see what it looks like currently in this Image
You can also view a sample code on Stack Blitz here
Below is the 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>