Add HorizontalInputGroupLayout Component

frontend/src/components/basics/HorizontalInputGroupLayout.tsx

@@ -0,0 +1,29 @@
+import type {ReactNode} from "react";
+import clsx from "clsx";
+
+type HorizontalInputGroupLayoutProps = {
+    /** Content to render inside the header */
+    children: ReactNode;
+
+    /** Optional additional Tailwind classes */
+    className?: string;
+};
+
+/**
+ * A layout for horizontally aligning inputs and buttons - designed for pages with several input items in a row
+ * @param children Children of the layout, i.e., inputs
+ * @param className Optional additional styles
+ * @constructor
+ */
+export default function HorizontalInputGroupLayout({children, className = ""}: HorizontalInputGroupLayoutProps) {
+    return (
+        <div
+            className={clsx(
+                "flex gap-2 mb-2 items-center",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}