Simplify new investment header HTML

In commit 49b406199 we added an extra `<span>` element just so we could
add an icon to the right while maintaining both the title and subtitle
on the left.

We can do the same thing without the extra `<span>` element, absolutely
positioning the element and leaving enough padding.

app/assets/stylesheets/budgets/investments/new.scss

@@ -34,12 +34,30 @@
       @include brand-background($brand-secondary);
       @include background-till-left-of-screen;
       @include has-fa-icon(chart-pie, solid, after);
-      align-items: center;
-      display: flex;
       flex: 1;
       font-size: rem-calc(36);
       padding: $line-height * 2 0;
 
+      @include breakpoint(small) {
+        &::after {
+          display: none;
+        }
+      }
+
+      @include breakpoint(medium) {
+        padding-right: 4em;
+
+        &::after {
+          display: block;
+          font-size: 2em;
+          margin-right: rem-calc(60);
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
       @include breakpoint(large) {
         clip-path: polygon(
           -100vw -#{$border-width},
@@ -56,18 +74,7 @@
         height: calc(100% + 2 * #{$border-width});
       }
 
-      &::after {
+      span {
-        display: none;
-
-        @include breakpoint(medium) {
-          display: block;
-          font-size: 2em;
-          margin-left: auto;
-          margin-right: rem-calc(60);
-        }
-      }
-
-      span span {
         display: block;
         font-size: 0.75em;
         margin-top: $line-height / 2;

app/views/budgets/investments/new.html.erb

@@ -3,7 +3,6 @@
 
   <header>
     <h1>
-      <span>
       <%= t("budgets.investments.form.title") %>
 
       <% if @budget.single_heading? %>
@@ -13,7 +12,6 @@
                 price: @budget.formatted_heading_price(@budget.headings.first)) %>
         </span>
       <% end %>
-      </span>
     </h1>
   </header>