Adding a label between two datetime input

I am trying to add a label between two datetime element, but the label always goes to the left before the first datetime input.

<ion-item>
    <ion-label>Time:</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD" placeholder="Start"></ion-datetime>
      <span style="display: inline-block;vertical-align: middle;">To</span>
    <ion-datetime displayFormat="YYYY-MM-DD" placeholder="End"></ion-datetime>
    </ion-item>

SCSS

ion-datetime { 
  color: #387ef5; 
  button { 
    position: relative !important; } 
 .datetime-text { 
    overflow: visible; } 
  flex: 2; }

i suggest you to use row column concept

<ion-row>
<ion-col col-5>
    <ion-item>
    <ion-label>Time:</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD" placeholder="Start"></ion-datetime>
    </ion-item>
</ion-col>
<ion-col col-2>To</ion-col>
<ion-col col-5>
    <ion-item>
    <ion-label>Time:</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD" placeholder="End"></ion-datetime>
    </ion-item>
</ion-col>
</ion-row>

The labels are not properly shown when I used columns and rows. Capture
Capture2

@Mc123321

here are the basics… you can style the rest

<ion-item>
  <ion-label>Time:</ion-label>
  <ion-row item-content>
    <ion-col>
      <ion-datetime displayFormat="YYYY-MM-DD" placeholder="Start"></ion-datetime>
    </ion-col>
    <ion-col>
      <ion-label>To</ion-label>
    </ion-col>
    <ion-col>
      <ion-datetime displayFormat="YYYY-MM-DD" placeholder="End"></ion-datetime>
    </ion-col>
  </ion-row>
</ion-item>

The label just disappeared after I selected time. It does not change if I change the size of the column or the size of datetime element33(This is the screenshot from the mobile emulator)

it is going to be a challange to get all that content one line with the labels on a small mobile device, but it really is a styling exercise from here