Ionic Label with input side by side, align label right sides

Question

I am using Ionic 5 and have a few labels with inputs where the label is on the left and the inputs next to the label.

Here is the code:

  <div id="container">
    <ion-item>
      <ion-label>Label 1</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Another Label</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Third Label</ion-label>
      <ion-input placeholder="something here"></ion-input>
    </ion-item>
  </div>

As you can see above, the labels are different sizes.

How can I make the right side of the labels be aligned?

Answer 1

Add this in your scss and should work:

ion-item > ion-label{
    flex: content;
}