How to keep items alligned in angular material tab-CodePudding

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 >Tract List 
        <div >
            
            <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  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   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 >Excluded property's
        <mat-selection-list  #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>

CodePudding user response：

Add d-md-flex and gap:10px to parent of mat-card.

<div  style="gap:10px;">
  <mat-card>.......</mat-card>
  <mat-card>.......</mat-card>
</div>

CodePudding user response：

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/app/farm-create/farm-create.component.html,src/app/farm-create/farm-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 >
 ...
<mat-card>...</mat-card>
<mat-card>...</mat-card>
</div>