how can I show two ion-col field inside ion-item section in IONIC 3

Question

I need to show two input field inside a row look like:

But when I use :

<ion-list>
<ion-item>
  <ion-label stacked> Phone Number</ion-label>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-input type="tel" placeholder="Area code"></ion-input>
      </ion-col>
      <ion-col>
        <ion-input type="tel" placeholder="Number"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

But it not show any thing screen like:

Please help me.

Answer 1

Please try to add ion-row before the ion-item. I hope this may help you. Thanks

<ion-list>

  <ion-label stacked> Phone Number</ion-label>

    <ion-row>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Area code"></ion-input>
    </ion-item>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
    </ion-row>

</ion-list>