How to set a label in between the select value and the arrow (ion-select) React

[javier-soto-dev15]

Hi, i am trying to get a permanent label in the ion select that remains there after making the selection and it has to be between the option i selected and the arrow, in this case the Kgs and grs. Not sure how to do that or if it is possible. Picture for reference

And this is what i have at the moment

[ciccilleju]

i think you can use something like:

• main container (in position: relative)
• a ion-label item in position: absolute
• ion-item with a ion-select inside

  <div class="main-container">
    <ion-item>
      <ion-label>
        A LABEL
      </ion-label>

      <ion-select>
        <ion-select-option>kg</ion-select-option>
      </ion-select>
     
    </ion-item>
  </div>
 

the css could be:

.select-icon {
position: absolute;
right: 50%;
}
.select-text {
position: absolute;
left: 0;
}

ion-label {

position: absolute;
left: 20%;
}

.main-container {
position: relative;
}