[TASK] add input group element with interaction

frontend/scss/components/_input.scss

@@ -2,6 +2,25 @@
   @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
+.input-group {
+  @apply flex;
+
+  input[readonly] {
+    opacity: .7;
+  }
+
+  &.editable {
+      input[type="reset"],
+      input[type="submit"] {
+          @apply block;
+      }
+
+      button[type="button"] {
+          @apply hidden;
+      }
+  }
+}
+
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;