Improve SideLabel positioning (#35)

# Improve SideLabel positioning

## ♻️ Current situation & Problem
SideLabel needs to be versatile to handle all kind of input/label sizes,
like bigger `Checkbox` or `Switch`.


## ⚙️ Release Notes 
* Add `center` prop
* Remove margin and wrapper to rely on flex properties


![image](https://github.com/user-attachments/assets/ecb0f111-739c-4c4a-84c8-f727ae0dad4d)



## 📝 Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md).

src/components/SideLabel/SideLabel.stories.tsx

@@ -29,6 +29,27 @@ export const Reversed = () => (
   </SideLabel>
 )
 
+const complexLabel = (
+  <>
+    <h2 className="mb-2 font-bold">Lorem</h2>
+    <p className="font-light">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+    </p>
+  </>
+)
+
+export const Complex = () => (
+  <SideLabel label={complexLabel}>
+    <Switch />
+  </SideLabel>
+)
+
+export const ComplexNonCentered = () => (
+  <SideLabel label={complexLabel} center={false}>
+    <Switch />
+  </SideLabel>
+)
+
 export const NoInput = () => (
   <SideLabel label="Check me">
     <span className="hidden">input goes here</span>

src/components/SideLabel/SideLabel.tsx

@@ -11,8 +11,15 @@ import { cn } from '../../utils/className'
 
 type SideLabelProps = Omit<HTMLProps<HTMLLabelElement>, 'label'> & {
   label?: ReactNode
-  /* Show label on right side */
+  /**
+   * Show label on right side
+   * */
   reverse?: boolean
+  /**
+   * Center content vertically
+   * @default true
+   * */
+  center?: boolean
 }
 
 /**
@@ -23,17 +30,19 @@ export const SideLabel = ({
   className,
   label,
   reverse,
+  center = true,
   ...props
 }: SideLabelProps) => (
   <label
     className={cn(
-      'flex cursor-pointer select-none items-center gap-2.5',
+      'flex cursor-pointer select-none gap-2.5',
       reverse && 'flex-row-reverse',
+      center && 'items-center',
       className,
     )}
     {...props}
   >
-    <div className="mt-1">{children}</div>
+    {children}
     <div className="text-sm leading-none">{label}</div>
   </label>
 )