FIX: Make form fields flex

src/scss/_components/_ui.form.basics.scss

@@ -21,7 +21,7 @@ input.time {
         font-variant: normal;
         text-rendering: auto;
         line-height: 1;
-        font-family: Font Awesome\5 Free;
+        font-family: Font awesome\5 Free;
         font-weight: 900;
     }
 
@@ -45,10 +45,6 @@ input.time {
         margin-top: 1rem;
     }
 
-    .field {
-        display: flex;
-    }
-
     .form-control {
         width: 100%;
     }

src/scss/_components/_ui.main.scss

@@ -125,12 +125,29 @@ textarea,
 }
 
 .field {
+    display: flex;
+    flex-wrap: wrap;
+
     position: relative;
     margin: $field-gutter-height 0;
 
+    &.collapse {
+        display: none;
+        &.show {
+            display: flex;
+        }
+    }
+
     &.composite {
+        display: block;
         margin-top: 0;
         margin-bottom: 0;
+        &.collapse {
+            display: none;
+            &.show {
+                display: block;
+            }
+        }
     }
 
     &.required {
@@ -157,7 +174,16 @@ textarea,
             color: $red;
         }
     }
+    .left {
+        flex: 1 1 20%;
+    }
 
+    .middleColumn {
+        flex: 1 1 80%;
+    }
+
+    .right {
+    }
     .bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
         width: 100%;
     }