выровнять элемент Div с гибким макетом (fxlayout) не работает

Я пытаюсь настроить свой div, но он работает некорректно.

Вот код. (Я хочу, чтобы мои 2 бок о бок для 75% / 25%. Также я хочу, чтобы мой выбор (мат-радио) находился в верхней части первого DIV и оба выбора (выпадающий список) рядом. Как на картинке, которую я включаю.

Вот код:

<form [formGroup]="concessionFrmGroup">
<div class="mat-typography app-frame">
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="center center">
  <div class="padding" flex="50">
    <label id="radio-group-label">Affrontement entre :</label>
    <mat-radio-group aria-labelledby="radio-group-label" class="radio-group">
      <mat-radio-button class="radio-button" value="1" checked="true">Concession</mat-radio-button>
      <mat-radio-button class="radio-button" value="2">Équipe</mat-radio-button>
    </mat-radio-group>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-label>Choisir une concession</mat-label>
          <mat-select [(ngModel)]="selectedConcession" formControlName="concessionFrmGroup" >
          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden={{this.logo1hidden}} />
      <div class="logo" fxFlexAlign="center">
        {{this.name1}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
    <div fxLayoutAlign="flex-start">
      Contre
    </div>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-select placeholder="Choisir une concession" [(ngModel)]="selectedConcession2"
            formControlName="concessionFrmGroup" >

          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
      <div class="logo" fxFlexAlign="center">
        {{this.name2}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
  </div>
  <div class="padding">
    <label id="radio-group-label">Type :</label>
    <mat-radio-group aria-labelledby="radio-group-label2" class="radio-group">
      <mat-radio-button class="radio-button" value="s" checked="true">Saison</mat-radio-button>
      <mat-radio-button class="radio-button" value="p">Série</mat-radio-button>
    </mat-radio-group>

  </div>
</div>

<mat-tab-group class="mat-tab">
  <!-- <div class="bgborder bold left"> -->
  <mat-tab label="Test 0:">
    <!-- </div> -->
    <div fxLayout="column" fxLayoutGap="32px" fxLayoutAlign="space-around none" class="bg2">

    </div>
  </mat-tab>

  <mat-tab label="Test 1:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 1
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 2:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 2
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 3:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
      Test 3
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

</mat-tab-group>

Вот ссылка на stackblitz: https://angular-testtable.stackblitz.io/ https://stackblitz.com/edit/angular-testtable?file=src%2Fapp%2Fconcession.component.html

Вот пример того, как должна выглядеть моя страница:

(Я много пробую с гибкостью, и мне не удалось получить результат на изображении)

Спасибо за вашу помощь.

Новичок в гибкой компоновке.