CSS display Angular expansion panel element in one line

Question

I am using Angular <mat-expansion-panel> in my project.

I am unable to display Frate, Kunda and date and its value on one line.

I have tried using various css properties such as white-space: nowrap; but none of them are working for me

Working Demo - https://stackblitz.com/edit/mat-expansion-panel-en61pv?file=app%2Fexpansion-overview-example.html

.html

<div class="row">
  <div class="col-sm-7">
    <dl class="row property_set">
      <mat-accordion style="width:50%">
        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <dt class="col-sm-4 record_property">Term</dt>
            </mat-panel-title>
            <mat-panel-description>
              <dd class="col-sm-8 record_property_value term_name">

                <span >
              {{name1}}
            </span>
              </dd>
            </mat-panel-description>
          </mat-expansion-panel-header>

          <dt class="col-sm-4 record_property">Frate</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">{{id}}</dd>

          <dt class="col-sm-4 record_property">Kunda</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">

            <span>{{text1}}</span>
          </dd>

          <dt class="col-sm-4 record_property">Date</dt>
          <dd class="col-sm-8 record_property_value">{{date}}</dd>
        </mat-expansion-panel>
      </mat-accordion>
    </dl>
  </div>
</div>

.ts file

export class AppComponent {
   term: string = 'This is term'
  name1: string = 'This is name'
  id: string = 'This is id'
  text: string = 'This is text'
  text1: string = 'This is term1'
  date: string = 'This is date'
  panelOpenState = false;
}

Answer 1

::ng-deep .property_set .mat-expansion-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Add it in your css file. It should work.