How can I add 2 Title elements side by side using Angular?

In my project I am using <mat-expansion-panel>. I am trying to add 2 title element using <mat-panel-title> side by side with their respective description

Currently my code displays

Title1 Title2 Description1 Description2

What I am looking for is

Title1 Description1 Title2 Description2

Here is my code - Link - https://stackblitz.com/edit/mat-expansion-panel-q1qxz7?file=app%2Fexpansion-overview-example.html

<mat-nav-list>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Title 1 </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 1'}}</dd>
      </mat-panel-description>
      <mat-panel-title>
        Title 2
      </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 2'}}</dd>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</mat-nav-list>

As per Angular material documentation, mat-expansion-panel-header should have a single <mat-panel-title> and an <mat-panel-description> for proper positioning of panel content. But in your case you can try this method...

I have edited your stackblitz here and it seems to be working. Please verify..