How to create a picker with toggle (for weight and height) in Angular?

This is what I would like to achieve. I am a little bit stuck so if anyone has any suggestions that would be amazing. Thanks a lot!

Here is my code so far, it's working but it's not exactly what I am looking for it it looks more complicated for the user. I would like to be able to toggle between metrics in the picker as in the picture above. My solution seems a little bit patched but I am new into coding and not sure how to approach this.

HTML

<ion-content class="ion-padding">
  <form [formGroup]="measurementsForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div class="quiz-header">
            <ion-text class="small">QUESTION 2 OUT OF 10</ion-text>
            <h2>
              Now, let's talk about measurements
            </h2>
          </div>

          <ion-row class="quiz-choices">
            <ion-col>
              <ion-select
                [interfaceOptions]="customInterfaceOptions"
                formControlName="weightMeasurement"
                interface="action-sheet"
                placeholder="weight">
                <ion-select-option value="kg">kg</ion-select-option>
                <ion-select-option value="lbs">lbs</ion-select-option>
              </ion-select>
            </ion-col>

            <ion-col>
              <ion-input
                inputmode="numeric"
                formControlName="weightAmount"
                placeholder="amount"
                value="amount">
              </ion-input>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <ion-select
                [interfaceOptions]="customInterfaceOptions"
                formControlName="heightMeasurement"
                interface="action-sheet"
                placeholder="height"
                (ionChange)="onSelectHeightMeasurement($event)">
                <ion-select-option value="cm">cm</ion-select-option>
                <ion-select-option value="ft">ft</ion-select-option>
              </ion-select>
            </ion-col>

            <ion-col *ngIf="!showFtInput">
              <ion-input
                inputmode="numeric"
                formControlName="heightAmountCm"
                placeholder="amount">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                formControlName="heightAmountFoot"
                placeholder="foot"
                inputmode="numeric">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                formControlName="heightAmountInch"
                placeholder="inch"
                inputmode="numeric">
              </ion-input>
            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>

      <ion-row class="quiz-buttons">
        <ion-col>
          <ion-button class="back-button" (click)="onNavigatetBack()"><</ion-button>
        </ion-col>
        <ion-col>
          <ion-button
            class="next-button"
            [disabled]="!measurementsForm.valid"
            (click)="onSubmitStepTwo()"
            >Next
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>