# Inset input (item-input-inset) : right align input fields?

**URL:** <https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092>\
**Category:** ionic-v1\
**Created:** [April 16, 2015, 10:16am UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092 "2015-04-16T10:16:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![space\_cadet](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@space\_cadet](https://forum.ionicframework.com/u/space_cadet)\
**Post date:** [April 16, 2015, 10:16am UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092/1 "2015-04-16T10:16:07Z")

</div>

Hi,

I’m not a web developer originally so this might be real basic stuff. But I’ve tried and tried and it’s driving me crazy! So I have a list with inset inputs that looks like this:

![image](https://global.discourse-cdn.com/ionicframework/original/2X/c/c0757ee3b0c9fc2a28a26b85927746a31204864d.png)

I simply want the input fields and their texts to be right-aligned. How do I do that? This is the code:

```
<div class="list">
  <div class="item item-input-inset">
    <label class="input-label">Some rather long text</label>
    <input type="number" placeholder="input field">
  </div>
  <div class="item item-input-inset">
    <label class="input-label">Another rather long text</label>
    <input type="number" placeholder="input field">
  </div>
</div>
```

---

<div class="post-metadata">

**Author:** ![bobrov1989](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bobrov1989/32/98131_2.png) [@bobrov1989](https://forum.ionicframework.com/u/bobrov1989)\
**Post date:** [April 16, 2015, 4:05pm UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092/2 "2015-04-16T16:05:14Z")

</div>

inspect css styles in chrome

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [April 17, 2015, 12:57pm UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092/3 "2015-04-17T12:57:55Z")

</div>

> **[Blank Starter](https://codepen.io/mhartington/pen/oXvxYE)**
>
> A starting point for Ionic Demos Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Pull To Refresh: Nightly\](http://codepen.io/ionic/pen/mqolp/)....

---

<div class="post-metadata">

**Author:** ![space\_cadet](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@space\_cadet](https://forum.ionicframework.com/u/space_cadet)\
**Post date:** [April 17, 2015, 2:18pm UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092/4 "2015-04-17T14:18:57Z")

</div>

Thank you @brobov1989, the chrome inspector is great. And the emulator is also really helpful. I was able to find a solution that works for me by specifying a fixed width for the components and telling flexbox to expand the second component. I know this is not very elegant, and if anybody sees a better way, please do tell.

html

```
<form name="form">
  <div class="item item-input-inset">
    <label class="input-label my-label">Some rather long text</label>
    <input class="my-input" type="number" placeholder="input">
  </div>
  <div class="item item-input-inset">
    <label class="input-label my-label">Another rather long text</label>
    <input class="my-input" type="number" placeholder="input">
  </div>
</form>

```

css

```
.my-label {
    width: 220px;
    max-width: none;
}

.my-input {
    text-align: end;
    width: 60px;
    min-width: 60px;

    /* generated by http://the-echoplex.net/flexyboxes/ (to make input field expand) */
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
```

---

<div class="post-metadata">

**Author:** ![space\_cadet](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@space\_cadet](https://forum.ionicframework.com/u/space_cadet)\
**Post date:** [April 17, 2015, 2:19pm UTC](https://forum.ionicframework.com/t/inset-input-item-input-inset-right-align-input-fields/21092/5 "2015-04-17T14:19:50Z")

</div>

Sadly, this doesn’t work if you limit the size to, say, iPhone 5 dimensions (320x568).