Ion-item with left & right justified text

Ionic Framework ionic-v3
1

I want to make an ion-item that has both left and right justified text in it. My use-case is to have a paycheck viewing UI where within an <ion-card> there is a list of clickable <ion-item>'s (checks), with the check date on the left, the amount on the right, and the whole item can be clicked to view more.

I can make this work by having 2 <span> tags in the item, one with float:left applied and the other with float:right. This looks great on small form-factors, but falls apart on a tablet. An example is below. Is there a better way to do this?

              <button item-right ion-item *ngFor="let settlement of recentSettlements | slice:0:3" (click)="showSettlement(settlement)">
                <span class="floatLeft">{{settlement.checkDate.slice(0,10)}}</span>
                <span class="floatRight" [ngClass]="(settlement.checkTotal >= 0) ? 'positiveAmount' : 'negativeAmount'">${{settlement.checkTotal}}</span>               
              </button>

image

2

For reference, this bad UI was a result of not having enough space for the content in my ionic responsive grid setup. So the lesson is, if content is getting smashed on different form-factors, make sure your content has more room :slight_smile: