How to avoid breaking of text into two lines

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>

You have to use grid view. And usage will be like <ion-col col-3> Due Date </ion-col> OR <ion-col size="3"> Due Date </ion-col>

Any of the CSS white-space options look useful?