Move budget group actions to their own line

The problem of having actions next to the title is that, when there are
titles of very different lenghts, at certain resolutions some actions
will be next to their titles (because there'll be space for everything)
but some actions will be below their titles. This makes it hard for
people to follow where the actions are.

app/assets/stylesheets/admin/budgets/groups_and_headings.scss

@@ -6,20 +6,6 @@
     margin-top: $line-height * 1.5;
   }
 
-  > section {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  h4 {
-    margin-#{$global-right}: $gap;
-  }
-
-  dl,
-  .callout {
-    width: 100%;
-  }
-
   dt,
   dd {
     display: inline;
@@ -44,8 +30,10 @@
   .groups-actions {
     @include flex-with-gap($gap);
     align-items: flex-start;
-    flex: 1;
+
-    margin-bottom: $line-height / 2;
+    + * {
+      margin-top: $line-height / 2;
+    }
 
     .edit-link,
     .destroy-link {