Use rows and columns to position TotalsBox correctly

templates/task_orders/edit.html

@@ -4,6 +4,7 @@
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/save_button.html' import SaveButton %}
+{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
 {% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/text_input.html' import TextInput %}
 {% from "components/totals_box.html" import TotalsBox %}
@@ -77,7 +78,6 @@
 {% endmacro %}
 
 {% block portfolio_content %}
-
   {% call StickyCTA(text="Add Funding") %}
     <span class="action-group">
       <input type="submit" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
@@ -89,6 +89,7 @@
       </a>
     </span>
   {% endcall %}
+
   <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
     <div class="task-order-summary">
       {% include "fragments/flash.html" %}
@@ -100,21 +101,17 @@
         <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
           {{ form.csrf_token }}
 
-          <semi-collapsible-text inline-template>
-            <div>
-              <div v-bind:class="{ 'semi-collapsed' : !open }">
-                {{ "task_orders.new.form_help_text" | translate }}
-              </div>
-              <a v-on:click='toggle' v-show="!open" class="right more">More{{ Icon('caret_down') }}</a>
-              <a v-on:click='toggle' v-show="open" class="right more">Less{{ Icon('caret_up') }}</a>
-            </div>
-          </semi-collapsible-text>
+          {{ SemiCollapsibleText(paragraph="task_orders.new.form_help_text" | translate) }}
 
           <hr>
 
           <div class="h1">Add your task order</div>
+          <div class="row">
+            <div class="col">
               {{ TextInput(form.number, validation='taskOrderNumber') }}
 
+              <hr>
+
               <div class="h3">Add the summary of cloud funding</div>
               <div>
                 Data must match with what is in your uploaded document.
@@ -341,10 +338,11 @@
                 Upload a single PDF containing all relevant information. {{ Icon('help')}}
               </div>
             {{ UploadInput(form.pdf) }}
-
-      </form>
+          </div>
           {{ TotalsBox(task_order=task_order) }}
         </div>
+      </form>
+    </div>
   </to-form>
 
 {% endblock %}