diff --git a/awx/ui/client/features/output/stats.partial.html b/awx/ui/client/features/output/stats.partial.html
index a9b2dffa8c..35babd1505 100644
--- a/awx/ui/client/features/output/stats.partial.html
+++ b/awx/ui/client/features/output/stats.partial.html
@@ -1,20 +1,20 @@
 <!-- todo: styling, markup, css etc. - disposition according to project lib conventions -->
 <div class="at-u-floatRight">
     <span ng-show="!vm.hideCounts" class="at-Panel-label">plays</span>
-    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
-    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.plays || 0 }}</span>
+    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
+    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.plays || 0 }}</span>
 
     <span ng-show="!vm.hideCounts" class="at-Panel-label">tasks</span>
-    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
-    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.tasks || 0 }}</span>
+    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
+    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.tasks || 0 }}</span>
 
     <span ng-show="!vm.hideCounts" class="at-Panel-label">{{:: vm.strings.get('stats.HOSTS')}}</span>
-    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
-    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.hosts || 1 }}</span>
+    <span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
+    <span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.hosts || 1 }}</span>
 
     <span class="at-Panel-label">{{:: vm.strings.get('stats.ELAPSED') }}</span>
-    <span ng-show="vm.running" class="at-Panel-headingTitleBadge">...</span>
-    <span ng-show="!vm.running" class="at-Panel-headingTitleBadge">
+    <span ng-show="vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
+    <span ng-show="!vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">
         {{ (vm.elapsed * 1000 || 0) | duration: "hh:mm:ss"}}
     </span>
 
diff --git a/awx/ui/client/lib/components/panel/_index.less b/awx/ui/client/lib/components/panel/_index.less
index 3a66b22906..33d12aa7a1 100644
--- a/awx/ui/client/lib/components/panel/_index.less
+++ b/awx/ui/client/lib/components/panel/_index.less
@@ -44,7 +44,13 @@
     vertical-align: middle;
     white-space: nowrap;
     text-align: center;
-    margin-right: @at-space-2x;
+    margin-left: 10px;
+    margin-right: auto;
+
+    &--inline {
+        margin-right: @at-space-2x;
+        margin-left: 0;
+    }
 }
 
 .at-Panel-headingCustomContent {