fix: rewrite field alignment with CSS Grid subgrid

The flexbox margin-top:auto approach fundamentally cannot sync positions
across separate flex containers. Replace with CSS Grid + subgrid which
shares three row tracks (label | input | help text) across all columns
in a .fields-aligned-row. Labels, inputs, and help text now align
perfectly regardless of label wrapping or help text presence.

Bump version to 0.63.6.

Author: matteius

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.63.6] - 2026-04-02
+
+### Fixed
+- **Side-by-side field alignment rewritten with CSS Grid + subgrid** —
+  replaced the flexbox `margin-top: auto` approach (which could never sync
+  positions across separate flex containers) with a CSS Grid layout that
+  uses `subgrid` to share three row tracks (label | input | help text)
+  across all columns. Labels, inputs, and help text now align perfectly
+  regardless of label wrapping or the presence/absence of help text in
+  any column.
+
 ## [0.63.5] - 2026-04-02
 
 ### Fixed

django_forms_workflows/static/django_forms_workflows/css/forms.css

@@ -2,45 +2,54 @@
    forms.css — Alignment, spacing & responsive polish for django-forms-workflows
    ═══════════════════════════════════════════════════════════════════════════ */
 
-/* ── Side-by-side field alignment ────────────────────────────────────────
-   When two or more fields sit in a .row.fields-aligned-row, every column
-   becomes a flex column so .mb-3 can stretch to fill it.  The input/select
-   uses margin-top:auto to push itself to the bottom of the label area,
-   keeping inputs horizontally aligned regardless of label wrapping. */
-
-/* 1. Make each column a flex column so .mb-3 can stretch */
-.row.fields-aligned-row > [class*="col-"],
-.row.fields-aligned-row > .field-wrapper {
-    display: flex;
-    flex-direction: column;
-}
-
-/* 2. .mb-3 fills the column and is itself a flex column */
-.row.fields-aligned-row > [class*="col-"] > .mb-3,
-.row.fields-aligned-row > .field-wrapper > .mb-3 {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-}
+/* ── Side-by-side field alignment (CSS Grid + subgrid) ─────────────────
+   When two or more fields sit in a .row.fields-aligned-row we switch from
+   Bootstrap's flexbox row to a CSS Grid so that labels, inputs and help
+   text each share a common row track across columns.  This guarantees
+   perfect horizontal alignment regardless of label wrapping or the
+   presence / absence of help text in any column.
+
+   Grid row tracks:  1 = label  |  2 = input  |  3 = help text / errors
+   ──────────────────────────────────────────────────────────────────────── */
+
+/* 1. The row becomes a CSS Grid; columns flow automatically */
+@media (min-width: 768px) {
+    .row.fields-aligned-row {
+        display: grid !important;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        grid-template-rows: auto auto auto;
+        column-gap: var(--bs-gutter-x, 1.5rem);
+        margin-left: 0;
+        margin-right: 0;
+    }
 
-/* 3. Labels stay at their natural size */
-.row.fields-aligned-row > [class*="col-"] > .mb-3 > label,
-.row.fields-aligned-row > .field-wrapper > .mb-3 > label {
-    flex-shrink: 0;
-}
+    /* 2. Each field-wrapper spans all 3 row tracks and inherits them */
+    .row.fields-aligned-row > .field-wrapper {
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-row: span 3;
+        /* Reset Bootstrap column flex/width — grid handles sizing */
+        width: auto !important;
+        max-width: none !important;
+        flex: none !important;
+        padding-left: 0;
+        padding-right: 0;
+    }
 
-/* 4. Push the input/select to the bottom of the label area */
-.row.fields-aligned-row > [class*="col-"] > .mb-3 > .form-control,
-.row.fields-aligned-row > [class*="col-"] > .mb-3 > .form-select,
-.row.fields-aligned-row > .field-wrapper > .mb-3 > .form-control,
-.row.fields-aligned-row > .field-wrapper > .mb-3 > .form-select {
-    margin-top: auto;
-}
+    /* 3. .mb-3 also inherits the 3 row tracks via subgrid */
+    .row.fields-aligned-row > .field-wrapper > .mb-3 {
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-row: span 3;
+        margin-bottom: 0 !important;  /* grid gap handles spacing */
+    }
 
-/* 5. Help text sits after the input at its natural size */
-.row.fields-aligned-row > [class*="col-"] > .mb-3 > .form-text,
-.row.fields-aligned-row > .field-wrapper > .mb-3 > .form-text {
-    flex-shrink: 0;
+    /* 4. Labels sit at the bottom of their row-track so short labels
+       align with the bottom of taller (wrapping) labels. */
+    .row.fields-aligned-row > .field-wrapper > .mb-3 > label {
+        align-self: end;
+    }
 }
 
 /* ── Consistent field spacing ────────────────────────────────────────── */

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-forms-workflows"
-version = "0.63.5"
+version = "0.63.6"
 description = "Enterprise-grade, database-driven form builder with approval workflows and external data integration"
 license = "LGPL-3.0-only"
 readme = "README.md"