Fix position of counters within milestone panels

app/assets/stylesheets/pages/milestone.scss

@@ -30,6 +30,26 @@
       word-wrap: break-word;
     }
   }
+
+  .panel-heading {
+    line-height: $line-height-base;
+    padding: 14px 16px;
+    display: -webkit-flex;
+    display: flex;
+
+    .title {
+      -webkit-flex: 1;
+      -webkit-flex-grow: 1;
+      flex: 1;
+      flex-grow: 2;
+    }
+
+    .counter {
+      -webkit-flex: 1;
+      flex: 0;
+      padding-left: 16px;
+    }
+  }
 }
 
 .milestone-summary {

app/views/shared/milestones/_issuables.html.haml

@@ -3,11 +3,11 @@
 - panel_class = primary ? 'panel-primary' : 'panel-default'
 
 .panel{ class: panel_class }
-  .panel-heading.split
-    .left
+  .panel-heading
+    .title
       = title
     - if show_counter
-      .right
+      .counter
         = number_with_delimiter(issuables.size)
 
   - class_prefix = dom_class(issuables).pluralize

changelogs/unreleased/23819-fix-milestone-counters-to-top-right-of-panel-headings.yml

@@ -0,0 +1,4 @@
+---
+title: Fix position of counter in milestone panels
+merge_request: 7842
+author: Andrew Smith (EspadaV8)