<html ng-app="ionicApp">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

 <title>Ionic Template</title>

 <link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
 <script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MyCtrl">

 <ion-header-bar class="bar-positive"></ion-header-bar>

 <ion-content padding="true">
 <div class="list">
    <div class="item item-input item-select alignRight">
        <div class="input-label">
            Company Color
        </div>
        <select dir="rtl">
            <option>Blue</option>
            <option>Yellow</option>
        </select>
    </div>
    <div class="item item-input item-select alignRight">
        <div class="input-label">
            Week Start
        </div>
        <select dir="rtl">
            <option selected>Sunday</option>
            <option>Monday</option>
            <option>Tuesday</option>
            <option>Wednesday</option>
            <option>Thursday</option>
            <option>Friday</option>
            <option>Saturday</option>
        </select>
    </div>
    <div class="item item-input item-select alignRight">
        <div class="input-label">
            Round Times To Nearest
        </div>
        <select dir="rtl">
            <option selected>15 minutes</option>
            <option>30 minutes</option>
        </select>
    </div>
    <div class="item item-input item-select alignRight">
        <div class="input-label">
            Pay Period
        </div>
        <select dir="rtl">
            <option selected>Weekly</option>
            <option>Monthly</option>
        </select>
    </div>
    <label class="item item-input alignRight">
        <span class="input-label">Last Payday</span>
        <input type="date" placeholder="Nov 16, 2014">
    </label>
</div>

<h3>Pay Modifiers</h3>
<div class="list">
    <div class="item item-input item-select alignRight">
        <div class="input-label">
            Lunch
        </div>
        <select dir="rtl">
            <option selected>Lunch is Paid Time</option>
            <option>30 minutes unpaid</option>
        </select>
    </div>
    <div class="item item-input item-toggle alignRight">
        <div class="input-label">
            Add lunch by default
        </div>
        <label class="toggle toggle-positive">
            <input type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </div>
    <label class="item item-input alignRight">
        <span class="input-label">Pay Deduction %</span>
        <input type="number" placeholder="34.25">
    </label>
</div>
 </ion-content>

</body>

</html>
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}

.item.alignRight{
  padding-right:10px !important;
      -webkit-box-pack: justify !important;
    -moz-box-pack: justify !important;
    -webkit-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}
.item-input input{
  text-align:right !important;
  padding-right:0 !important;
}

select{
  width:155px;
}
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.