wrapping sidebars sibiling content in a section and adding some spacing

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -17,7 +17,7 @@
 
 <div class="wrapper wrapper--medium wrapper--inner-space-medium">
     <div class="wrapper wrapper--sidebar">
-        <div>
+        <section class="section section--has-sidebar">
             <h6 class="heading heading--submission-meta">
                 <span>Submitted: </span>{{ object.submit_time.date }} by {{ object.user.get_full_name }}
             </h6>
@@ -47,7 +47,7 @@
             <div class="rich-text rich-text--answers">
                 {{ object.render_answers }}
             </div>
-        </div>
+        </section>
 
         <aside class="sidebar">
             {% include "funds/includes/progress_form.html" %}

opentech/static_src/src/sass/apply/components/_section.scss

+.section {
+    &--has-sidebar {
+        flex-grow: 1;
+        margin: 20px 0;
+
+        @include media-query(tablet-portrait) {
+            padding-right: 20px;
+            margin-bottom: 0;
+        }
+    }
+}

opentech/static_src/src/sass/apply/main.scss

@@ -17,6 +17,7 @@
 @import 'components/icon';
 @import 'components/link';
 @import 'components/rich-text';
+@import 'components/section';
 @import 'components/sidebar';
 @import 'components/status-bar';
 @import 'components/form';