Used flexbox to force related merge request list items into columned items

app/assets/stylesheets/pages/issues.scss

@@ -48,6 +48,15 @@ form.edit-issue {
   margin: 0;
 }
 
+ul.related-merge-requests > li {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  .merge-request-id {
+    flex-shrink: 0;
+  }
+}
+
 .merge-requests-title, .related-branches-title {
   font-size: 16px;
   font-weight: 600;

app/views/projects/issues/_merge_requests.html.haml

 - if @merge_requests.any?
   %h2.merge-requests-title
     = pluralize(@merge_requests.count, 'Related Merge Request')
-  %ul.unstyled-list
+  %ul.unstyled-list.related-merge-requests
     - has_any_ci = @merge_requests.any?(&:pipeline)
     - @merge_requests.each do |merge_request|
       %li

app/views/projects/issues/_related_branches.html.haml

 - if @related_branches.any?
   %h2.related-branches-title
     = pluralize(@related_branches.count, 'Related Branch')
-  %ul.unstyled-list
+  %ul.unstyled-list.related-merge-requests
     - @related_branches.each do |branch|
       %li
         - target = @project.repository.find_branch(branch).target