Left aligned label and right-aligned input

Ionic Framework
1

In the code excerpt below there are two inputs, each with a label.
In the first, the select input is displayed on the far right of the page.
In the second, the text input is to the left, immediately to the right of its the label.
How can I make this text input also right-align? This is a popup form to add a record and I would like all the inputs to line up the same way, labels on the left, inputs on the right.

    <ion-item>
      <ion-label>Strategy</ion-label>
      <ion-select interface="popover">
        <ion-select-option>..(dynamic list of options).</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label position="inline">Value</ion-label>    
      <ion-input placeholder="Estimated value"></ion-input>
    </ion-item>

I tried the solutions suggested in this page: https://stackoverflow.com/questions/47221045/align-text-in-ion-input-ionic-2

Thanks.

2

In case it helps I found the solution in another stackoverflow post: https://stackoverflow.com/questions/61410754/aligning-right-in-ionic

Using just the class=“right” did what I needed, it wasn’t necessary to add slot=“end” as well.

.right {
    float: right;
    text-align: right;
 }
1 Like