My text is breaking due date into two lines.How to avoid that
<ion-header>
<ion-toolbar>
<ion-title>Fees</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid fixed="true">
<ion-row><h1>Grand Total</h1></ion-row>
<ion-row>
<ion-col>
Amount
</ion-col>
<ion-col>
Discount
</ion-col>
<ion-col>
Fine
</ion-col>
<ion-col>
Paid
</ion-col>
<ion-col>
Balance
</ion-col>
</ion-row>
<ion-row>
<ion-col>
$22946
</ion-col>
<ion-col>
$0
</ion-col>
<ion-col>
$0
</ion-col>
<ion-col>
$39734
</ion-col>
<ion-col>
$-16788
</ion-col>
</ion-row>
</ion-grid>
<ion-grid fixed="true">
<ion-row><h1>Overheads /operating costs</h1></ion-row>
<ion-row>
<ion-col>
Due Date
</ion-col>
<ion-col>
Amount
</ion-col>
<ion-col>
Paid
</ion-col>
<ion-col>
Balance
</ion-col>
<ion-col>
status
</ion-col>
</ion-row>
<ion-row>
<ion-col>
2020-01-01
</ion-col>
<ion-col>
$1619
</ion-col>
<ion-col>
$6518
</ion-col>
<ion-col>
$-4899
</ion-col>
<ion-col>
<ion-button color="danger" class="round">unpaid</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<hr>
</ion-content>