diff --git a/frontend/src/lib/components/form/form-input.svelte b/frontend/src/lib/components/form/form-input.svelte
index ab76404c..ffb62dee 100644
--- a/frontend/src/lib/components/form/form-input.svelte
+++ b/frontend/src/lib/components/form/form-input.svelte
@@ -8,6 +8,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import FormattedMessage from '../formatted-message.svelte';
+	import { cn } from '$lib/utils/style';
 
 	type WithoutChildren = {
 		children?: undefined;
@@ -48,44 +49,53 @@
 	const id = label?.toLowerCase().replace(/ /g, '-');
 </script>
 
-<Field.Field data-disabled={disabled} {...restProps}>
-	{#if label}
-		<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label>
-	{/if}
-	{#if description}
-		<Field.Description>
-			<FormattedMessage m={description} />
-			{#if docsLink}
-				<a
-					class="relative text-black after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white dark:text-white"
-					href={docsLink}
-					target="_blank"
-				>
-					{m.docs()}
-					<LucideExternalLink class="inline size-3 align-text-top" />
-				</a>
-			{/if}
-		</Field.Description>
-	{/if}
-	{#if children}
-		{@render children()}
-	{:else if input}
-		{#if type === 'date'}
-			<DatePicker {id} bind:value={input.value as Date} />
-		{:else}
-			<Input
-				aria-invalid={!!input.error}
-				class={inputClass}
-				{id}
-				{placeholder}
-				{type}
-				bind:value={input.value}
-				{disabled}
-				oninput={(e) => onInput?.(e)}
-			/>
+<Field.Field
+	data-disabled={disabled}
+	class={cn('flex flex-col justify-between', restProps.class)}
+	{...restProps}
+>
+	<div>
+		{#if label}
+			<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label
+			>
 		{/if}
-	{/if}
-	{#if input?.error}
-		<Field.Error class="text-start">{input.error}</Field.Error>
-	{/if}
+		{#if description}
+			<Field.Description>
+				<FormattedMessage m={description} />
+				{#if docsLink}
+					<a
+						class="relative text-black after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:translate-y-[-1px] after:bg-white dark:text-white"
+						href={docsLink}
+						target="_blank"
+					>
+						{m.docs()}
+						<LucideExternalLink class="inline size-3 align-text-top" />
+					</a>
+				{/if}
+			</Field.Description>
+		{/if}
+	</div>
+	<div>
+		{#if children}
+			{@render children()}
+		{:else if input}
+			{#if type === 'date'}
+				<DatePicker {id} bind:value={input.value as Date} />
+			{:else}
+				<Input
+					aria-invalid={!!input.error}
+					class={inputClass}
+					{id}
+					{placeholder}
+					{type}
+					bind:value={input.value}
+					{disabled}
+					oninput={(e) => onInput?.(e)}
+				/>
+			{/if}
+		{/if}
+		{#if input?.error}
+			<Field.Error class="text-start">{input.error}</Field.Error>
+		{/if}
+	</div>
 </Field.Field>
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
index 15cbf9d5..bb7aebd2 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
@@ -133,7 +133,7 @@
 			/>
 		</div>
 		<h4 class="mt-10 text-lg font-semibold">{m.attribute_mapping()}</h4>
-		<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
+		<div class="mt-4 grid grid-cols-1 gap-5 md:grid-cols-2">
 			<FormInput
 				label={m.user_unique_identifier_attribute()}
 				description={m.the_value_of_this_attribute_should_never_change()}