Fix visual alignment of buttons

Author: sebromero

home.html

@@ -102,7 +102,8 @@
 
 #footer {    
     display: flex;    
-    flex-wrap: wrap;    
+    flex-wrap: wrap;
+    align-items: flex-start;
     justify-content: space-between;
     margin: 0px 15px 0px;    
 }
@@ -130,15 +131,17 @@
 }
 
 
-#export {
+#secondary-controls button {
     margin-bottom: 15px;
+    vertical-align: top;
 }
 
 .button {
     background-color: #b5c8c9;
     border: 1px solid #b5c8c9;
     border-radius: 2px 2px 0 0;
     box-shadow: 0 4px #95a5a6;
+    margin-bottom: 4px;
     color: #000;
     cursor: pointer;    
     font-size: 14px;
@@ -152,13 +155,13 @@
 }
 
 .button:hover {
-    box-shadow: 0 2px #95a5a6;
+    box-shadow: 0 2px #95a5a6;    
     outline: none;
     transform: translateY(2px);
 }
 
 .button:active {
-    box-shadow: none;
+    box-shadow: none;    
     transform: translateY(4px);
 }
 
@@ -192,8 +195,9 @@
                     </div>
                     <div>
                         <input name="list" type="checkbox" checked id="list" />
-                        <label for="list">List&nbsp;Command&nbsp;Enabled</label>
+                        <label for="list">Enable&nbsp;List&nbsp;Command</label>
                     </div>
+                    <button id="clear" class="button">Clear&nbsp;Log</button>
                     <button id="export" class="button">Export&nbsp;Log</button>
                 </div>
             </div>