diff --git a/src/components/ui/__tests__/label.test.tsx b/src/components/ui/__tests__/label.test.tsx
new file mode 100644
index 000000000..b2d12d8e7
--- /dev/null
+++ b/src/components/ui/__tests__/label.test.tsx
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { Label } from "../label";
+
+describe("<Label>", () => {
+  it("lays out inline so the colon stays on the last word when it wraps", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x">Body temperature</Label>,
+    );
+    expect(html).toContain("inline-block");
+    // A flex box turns the ::after colon into a flex item of its own, which
+    // floats beside a wrapped label instead of following its last word.
+    expect(html).not.toMatch(/class="[^"]*\binline-flex\b/);
+    expect(html).toContain("after:content-[&#x27;:&#x27;]");
+  });
+
+  it("drops the colon when asked", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x" noColon>
+        Note
+      </Label>,
+    );
+    expect(html).toContain('data-no-colon="true"');
+  });
+
+  it("lets a call site take over the layout", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x" className="flex items-baseline">
+        Weight
+      </Label>,
+    );
+    expect(html).toMatch(/class="[^"]*\bflex\b/);
+    expect(html).not.toContain("inline-block");
+  });
+});
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index ce0b94a66..b0f3d313c 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -5,6 +5,17 @@ import { Label as LabelPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Form label. The trailing colon is an `::after` on the label itself; pass
+ * `noColon` where the label is not followed by its field.
+ *
+ * The label is `inline-block`, not `inline-flex`. In a flex box the colon is
+ * a flex item of its own, so a label that wraps (a long German or French
+ * field name in a narrow column) left the colon floating beside the whole
+ * text block instead of after the last word. In inline flow the colon is
+ * glued to the last word and wraps with it. A call site that lays out a name
+ * beside a unit sets `flex` itself and owns the colon there.
+ */
 function Label({
   className,
   noColon = false,
@@ -15,7 +26,7 @@ function Label({
       data-slot="label"
       data-no-colon={noColon}
       className={cn(
-        "inline-flex items-center pl-1 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:content-[':'] data-[no-colon=true]:after:content-none",
+        "inline-block pl-1 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:content-[':'] data-[no-colon=true]:after:content-none",
         className,
       )}
       {...props}