Resize ion-input and place on left of screen

Ionic Framework ionic-v3
1

I’m stuck trying to re-size my ion-input field and place it on the left of the screen. Currently I can re-size it, however it defaults to the middle of the screen and I can’t figure out the correct SCSS to align it on the left. I would also like some inline text to the right of the input. Please see image below. Does anyone else deal with small ion-input fields that don’t span the width of the screen?

image

My HTML is essentially:

<ion-content>
  <ion-list no-lines>
      <form>
        <ion-item>
          <ion-label stacked>Measurement</ion-label>
          <ion-input formControlName="Measurement" type="text"></ion-input>
        </ion-item>
    </form>
  </ion-list>
</ion-content>

And my SCSS is pretty simple so far:

ion-input {
	background-color: #F3F3F3;
	border: 1px solid #cecece;
	padding-left: 10px;
  width: 100px;
}

Can anyone assist?

2

Hi,
Follow this one -