multi-input field markup and styling

cms/static/sass/_settings.scss

@@ -90,10 +90,24 @@
 
           }
 
-          .delete-icon {
-            position: absolute;
-            right: 10px;
-            top: 10px;
+          .remove-item {
+            display: block;
+            border-top: 1px solid $lightGrey;
+            margin-top: 5px;
+            padding-top: 10px;
+            font-size: 13px;
+          }
+        }
+
+        .element-group {
+          width: 400px;
+          padding: 15px 20px;          
+          background: tint($lightGrey, 50%);
+          @include border-radius(3px);
+          @include box-sizing(border-box);
+
+          input.long, textarea {
+            width: 100%;
           }
         }
 
@@ -118,6 +132,11 @@
               margin-right: 0;
             }
           }
+
+          .remove-item {
+            float: left;
+            width: 100%;
+          }
         }
       }
 

cms/templates/settings.html

@@ -150,7 +150,7 @@
 
                 <div class="field">
                   <ol class="input-list course-milestone-list">
-                    <li class="element element-multi course-milestone-list-element">
+                    <li class="element element-multi element-group course-milestone-list-element">
                       <div class="course-milestone-date">
                         <input type="text" class="course-milestone-date-input date">
                         <span class="label-micro">Milestone Date</span>
@@ -161,6 +161,7 @@
                         <span class="label-micro">Milestone Name</span>
                       </div>
 
+                      <a href="#" class="remove-item remove-milestone-data"><span class="delete-icon"></span> Delete Milestone</a>
                     </li>
                   </ol>
 
@@ -232,7 +233,7 @@
 
                 <div class="field">
                   <ol class="input-list course-textbook-list">
-                    <li class="element element-stacked course-textbook-list-element">
+                    <li class="element element-stacked element-group course-textbook-list-element">
                       <div class="course-textbook-name">
                         <input type="text" class="long course-textbook-name-input">
                         <span class="label-micro">Textbook Name</span>
@@ -243,7 +244,7 @@
                         <span class="label-micro">Textbook URL</span>
                       </div>
 
-                      <a href="#" class="delete-icon remove-textbook-data"></a>
+                      <a href="#" class="remove-item remove-textbook-data"><span class="delete-icon"></span> Delete Textbook</a>
                     </li>
                   </ol>
 
@@ -265,7 +266,7 @@
 
                 <div class="field">
                   <ol class="input-list course-faq-list">
-                    <li class="element element-stacked course-faq-list-element">
+                    <li class="element element-stacked element-group course-faq-list-element">
                       <div class="course-faq-question">
                         <input type="text" class="long course-faq-question-input">
                         <span class="label-micro">Question</span>
@@ -276,6 +277,7 @@
                         <span class="label-micro">Answer</span>
                       </div>
 
+                      <a href="#" class="remove-item remove-faq-data"><span class="delete-icon"></span> Delete Question &amp; Answer</a>
                     </li>
                   </ol>