Ionic ion-item height on no string height varies for rest of the items

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    <link data-require="ionic@1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/1.2.4/css/ionic.css" />
    <link rel="stylesheet" href="https://rawgit.com/guylabs/ion-autocomplete/master/src/ion-autocomplete.css">
    <link rel="stylesheet" href="style.css" />
    
    
    <script data-require="ionic@1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/1.2.4/js/ionic.bundle.js"></script>
    <script src="https://rawgit.com/guylabs/ion-autocomplete/master/src/ion-autocomplete.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

</html>

/* Styles go here */


angular.module('starter', ['ionic','ion-autocomplete', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function ($stateProvider, $urlRouterProvider) {
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                cache: false,
                url: '/',
                templateUrl: 'main.html',
                controller: 'formCtrl'
            })
    });

<ion-view title="ion-autocomplete sample">
  <ion-header-bar align-title="center" class="bar-positive">
      <h1 class="title">Ion Item Height on Null</h1>
  </ion-header-bar>
    <ion-content>
      <h4>The height of the enpty ion-item must be same as 
      the height of other ion-items.<br/>Check out the item with light red color</h4>
      <div class=padding></div>
        <ion-list>
          <ion-item>Ion item with value long long long long long long asdasd asd asdas asd asdas asdas asd asd a</ion-item>
          <ion-item style="background-color:#FFF2F2;"></ion-item>
          <ion-item><div>Something</div><div>Second line</div></ion-item>
        </ion-list>
        
    </ion-content>
</ion-view>

angular.module('starter.controllers', [])



.controller('formCtrl', function ($scope) {
    $scope.model = [];
    $scope.externalModel = ['test1', 'test2'];
    $scope.selectedItems = [];
    $scope.callbackValueModel = "";
    $scope.getItemFromModelValue = function (modelValue) {
        return {
            id: modelValue,
            name: modelValue,
            view: "view: " + modelValue
        }
    };
    $scope.getTestItems = function (query) {

            return {
                items: [
                    {id: "1", name: query + "1", view: "view: " + query + "1"},
                    {id: "2", name: query + "2", view: "view: " + query + "2"},
                    {id: "3", name: query + "3", view: "view: " + query + "3"}]
            };
    };
    $scope.itemsClicked = function (callback) {
        $scope.callbackValueModel = callback;
    };
    $scope.clearModel = function () {
        $scope.externalModel = [];
    }
});

[
  { "text": "Tag1" },
  { "text": "Tag2" },
  { "text": "Tag3" },
  { "text": "Tag4" },
  { "text": "Tag5" },
  { "text": "Tag6" },
  { "text": "Tag7" },
  { "text": "Tag8" },
  { "text": "Tag9" },
  { "text": "Tag10" }
]