ion-item reduce width of end slot

Question

I need to make the end slot of my list item take up less width so I can make the name in the first slot longer.

Currently it takes up around 50% of the width and is wasting space.

<ion-list *ngIf="!isLoading">
  <ion-item *ngFor="let trail of trails" #defectReport (click)="onViewTrailDetails(trail)">

    <fa-icon class="icon icon-center status-open-icon" *ngIf="trail.status === trailStatus.Open" slot="start" [icon]="['fas', 'check-circle']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-closed-icon" *ngIf="trail.status === trailStatus.Closed" slot="start" [icon]="['fas', 'times-circle']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-new-icon" *ngIf="trail.status === trailStatus.New" slot="start" [icon]="['fas', 'burn']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-under-construction-icon" *ngIf="trail.status === trailStatus.UnderConstruction" slot="start" [icon]="['fas', 'exclamation-triangle']" size="2x"></fa-icon>

    <ion-label class="first-item-label">
      <span><h2 class="heading">{{trail.name}}</h2></span>
      <p class="label-text">{{trail.status}}</p>
    </ion-label>
    <ion-label slot="end" class="second-item-label">
      <p class="sub-heading">{{trail.statusNotes}}</p>
      <p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
    </ion-label>
  </ion-item>
</ion-list>

Answer 1

I ended up using ion-note. It caused some formatting issues but resolved my problem. https://ionicframework.com/docs/api/note

    <ion-note slot="end" class="second-item-label" [ngClass]="{'margin-top-auto': !trail.statusNotes}">
      <p class="sub-heading">{{trail.statusNotes}}</p>
      <p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
    </ion-note>