Add container components

frontend/src/components/basics/HorizontalInputGroupLayout.tsx

@@ -1,23 +1,22 @@
-import type {ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type HorizontalInputGroupLayoutProps = {
+type HorizontalInputGroupLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the group */
     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
+ * @param props all other props by html div that might be needed
  * @constructor
  */
-export default function HorizontalInputGroupLayout({children, className = ""}: HorizontalInputGroupLayoutProps) {
+export default function HorizontalInputGroupLayout({children, className, ...props}: HorizontalInputGroupLayoutProps) {
     return (
         <div
+            {...props}
             className={clsx(
                 "flex gap-2 mb-2 items-center",
                 className