more styling

frontend/styles/form/layout.less

@@ -0,0 +1,48 @@
+form {
+  .form-row {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    padding: .2em;
+
+  }
+  .form-row > label {
+    padding: .5em 1em .5em 0;
+    flex: 1;
+  }
+  .form-row > label + label {
+      flex: 0;
+  }
+  .form-row > label.switch  + label {
+      flex: 1;
+  }
+  .form-row > input {
+    flex: 2;
+
+  }
+  .form-row > span {
+      flex: 2;
+      text-align: right;
+  }
+  .form-row input[type="checkbox"] {
+      margin-top: 12px;
+  }
+  .form-row input[type="range"] {
+
+  }
+ @media screen and (min-width: 768px) {
+   	.form-row > input, .form-row > span {
+    	flex: 3;  
+   }
+  }
+ @media screen and (min-width: 992px) {
+   	.form-row > input, .form-row > span {
+    	flex: 4;  
+   }
+  }
+ @media screen and (min-width: 1200px) {
+   	.form-row > input, .form-row > span {
+    	flex: 5;  
+   }
+  }
+}