How do I stop leaving two radio buttons, one on the other using Angular and IONIC 3

Question

I’m having second thoughts about how to leave radio buttons next to each other. Being able to do this normally, but I’m having problems because of the radio-group

            <ion-list radio-group>
            <ion-col>
                <ion-item>
                <ion-label>PF</ion-label>
                <ion-radio checked="true" (click)="selectIndividuo('1')"></ion-radio>
                </ion-item>
            </ion-col>

            <ion-col >
                <ion-item>
                <ion-label>PJ</ion-label>
                <ion-radio (click)="selectIndividuo('2')"></ion-radio>
                </ion-item>

            </ion-col>
            </ion-list>

        </ion-row>
    </ion-grid>

Answer 1

To horizontal remove ion-list and try so:

  <ion-row radio-group>
    <ion-col>
      <ion-item>
        <ion-label>PF</ion-label>
        <ion-radio ></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>PJ</ion-label>
        <ion-radio></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

Stackblitz example