diff --git a/scss/_items.scss b/scss/_items.scss
index 93d8e0aefe1..c7562c19f25 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -51,7 +51,10 @@
 
   // Align badges within items
   .badge {
-    float: right;
+    @include display-flex();
+    position: absolute;
+    top: $item-padding;
+    right: ($item-padding * 2) + 5;
   }
   .badge + .badge {
     margin-right: 5px;
diff --git a/test/html/lists.html b/test/html/lists.html
index 0a6d9cc2fdf..7e7e8e0ee83 100644
--- a/test/html/lists.html
+++ b/test/html/lists.html
@@ -177,7 +177,9 @@ <h1 class="title">Lists</h1>
 
           <a href="#" class="item item-icon-left">
             <i class="icon ion-person-stalker energized fill-icon"></i>
-            Friends
+            Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
+            asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
+            asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
             <span class="badge badge-assertive">0</span>
           </a>
 
@@ -191,6 +193,7 @@ <h1 class="title">Lists</h1>
 
           <div href="#" class="item">
             Not a link so no default right arrow
+            <span class="badge badge-assertive">999</span>
           </div>
 
           <a href="#" class="item item-complex">