ion-item reduce width of end slot - ionic-framework

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>

Answer 2

ion-item is a flex container and ion-label has the style flex-grow: 1.
What I did is setting the first to flex-grow: 2, resulting in 2/3, 1/3 responsive proportions for labels.
In your case just add this to the CSS:
.first-item-label {
flex-grow: 2;
}
If you want the last label to have a fixed width, do this instead:
.second-item-label {
flex: 0 0 80px;
}

Answer 3

I recommend to use the following. Just change / reset the flex style of the label element, since it's a flex layout.
ion-label[slot='end'] {
flex: unset;
text-align: end;
}
The property text-align: end is optional and has nothing to do with the question. But in my opinion the right slot of an item should be right aligned. Especially input field.
You could use every element you want. But ion-label has some predefined styles which harmonize with the framework. And ion-note changes e.g. the font-size (in md style).
Update: This will be fixed in upcoming Ionic version (maybe Ionic 6). With this change flex: 1 is not longer set on slot="end".