✨(react) add horizontal mode to LabelledBox

This way initially added for the multi select but after some discussions
we decided to keep the label vertical even for the multi select. But this
could be useful in the future.

packages/react/src/components/Forms/LabelledBox/index.scss

@@ -38,4 +38,21 @@
       flex-grow: 1;
     }
   }
+
+  &--horizontal {
+    display: flex;
+    align-items: center;
+    height: auto;
+
+    label {
+      padding-top: 0;
+      position: static;
+      flex-shrink: 0;
+    }
+
+    .labelled-box__children {
+      flex-grow: 1;
+      padding: 0;
+    }
+  }
 }

packages/react/src/components/Forms/LabelledBox/index.tsx

@@ -7,6 +7,7 @@ export interface Props extends PropsWithChildren {
   htmlFor?: string;
   labelId?: string;
   hideLabel?: boolean;
+  horizontal?: boolean;
 }
 
 export const LabelledBox = ({
@@ -16,11 +17,13 @@ export const LabelledBox = ({
   htmlFor,
   labelId,
   hideLabel,
+  horizontal,
 }: Props) => {
   return (
     <div
       className={classNames("labelled-box", {
         "labelled-box--no-label": hideLabel,
+        "labelled-box--horizontal": horizontal,
       })}
     >
       {label && (