Ionic 4: How to have an ion-label (with minimum proportions) and ion-select (with maximum proportions) in the same line in a proportional way Ask

Ionic Framework Ionic Angular
1

I have a form for user registration. I have problems when placing labels and selects on the same line. Also in placing the same lines selects and Inputs.

This is my form, I highlighted the problem fields, Initially they look good

enter image description here

The problem is when I change content.

A huge blank space is left between both items. This does not allow the information to be viewed properly. Like this:

enter image description here

I need the ion-select country (pais) to take the maximum width possible.

On the bottom line, the same, the phone (telefono) ion-input field. Take the maximum width possible.

Here is my code for Pais line.

 <ion-item>
                    <ion-label class="ultraipunt">Pa&iacute;s</ion-label>

                    <ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event, phoneCodeSelect)" interface="popover">
                        <ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
                    </ion-select>
                </ion-item>

and this is what I tried to select line country code (Cod.) and phone (telefono field):

<ion-item>
                        <div style="width: 52%; height: 100%; float: left; padding-top: 1em; font-size: 2.4vh;">
                            <ion-select #phoneCodeSelect formControlName="phonecode" placeholder="Cod." interface="popover">
                                <ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
                            </ion-select>
                        </div>

                        <div style="width: 48%; height: 100%; float: right;">
                            <ion-input formControlName="phonehumber" type="number" placeholder="Telefono" class="ultraipunt" onfocusout="onDeviceReady()" required></ion-input>
                        </div>
                    </ion-item>

Any ideas?

2

Have you investigated using position="stacked" on the label?