Add style to the order calculator sidebar.

views/dashboardPage/sidebars.css

@@ -597,6 +597,35 @@ ORDER CALCULATOR
     width: 100%;
 }
 
+    .scroller{
+        max-height: 90%;
+        overflow-y: auto;
+    }
+
+    .calculatorItems{
+        width: 100%;
+    }
+
+        .calculatorItems thead tr th:nth-child(1){
+            text-align: left;
+        }
+
+        .calculatorItems thead tr th:nth-child(2){
+            text-align: right;
+        }
+
+        .calculatorItem:nth-child(odd){
+            background: rgb(201, 201, 201);
+        }
+
+        .calcUsage{
+            display: table-cell;
+            vertical-align: middle;
+            text-align: right;
+            font-weight: bold;
+            padding: 5px;
+        }
+
 /*
 TRANSACTION DETAILS
 */

views/dashboardPage/sidebars/orderCalculator.ejs

@@ -10,12 +10,20 @@
 
     <h1>ORDER CALCULATOR</h1>
 
-    <div id="calculatorItems"></div>
+    <div class="scroller">
+        <table id="calculatorItems" class="calculatorItems" cellspacing="0" cellpadding="5px">
+            <thead>
+                <th>INGREDIENT</th>
+                <th>USAGE / DAY (PREDICTED)</th>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
     <template id="calculatorItem">
-        <div class="calculatorItem">
-            <p></p>
-            <p></p>
-        </div>
+        <tr class="calculatorItem">
+            <td></td>
+            <td class="calcUsage"></td>
+        </tr>
     </template>
 </div>