fix: side-by-side field alignment with uneven label heights

Replace align-items-start with fields-aligned-row marker class so
columns stretch to equal height (default flex behaviour). The existing
margin-top:auto CSS then correctly pushes inputs to align at a
consistent vertical position regardless of label wrapping.

Bump version to 0.63.1.

Author: matteius

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.63.1] - 2026-04-02
+
+### Fixed
+- **Side-by-side field alignment** — inputs, labels, and help text now align
+  correctly when paired half/third/fourth-width fields have labels of
+  different heights (e.g. one wraps to two lines). Replaced
+  `align-items-start` with a `fields-aligned-row` marker class that uses the
+  default `align-items-stretch` behaviour, allowing `margin-top: auto` on
+  inputs to push them to a consistent vertical position.
+
 ## [0.63.0] - 2026-04-02
 
 ### Added

django_forms_workflows/forms.py

@@ -286,7 +286,7 @@ def __init__(
                                 Field(next_field.field_name),
                                 css_class=f"col-md-6 field-wrapper field-{next_field.field_name}",
                             ),
-                            css_class="align-items-start",
+                            css_class="fields-aligned-row",
                         )
                     )
                     i += 2
@@ -321,7 +321,7 @@ def __init__(
                             )
                             for f in group
                         ],
-                        css_class="align-items-start",
+                        css_class="fields-aligned-row",
                     )
                 )
             else:
@@ -1784,7 +1784,7 @@ def _build_layout_fields(self, field_defs):
                                 Field(next_field.field_name),
                                 css_class=f"col-md-6 field-wrapper field-{next_field.field_name}",
                             ),
-                            css_class="align-items-start",
+                            css_class="fields-aligned-row",
                         )
                     )
                     i += 2
@@ -1818,7 +1818,7 @@ def _build_layout_fields(self, field_defs):
                             )
                             for f in group
                         ],
-                        css_class="align-items-start",
+                        css_class="fields-aligned-row",
                     )
                 )
             else:

django_forms_workflows/static/django_forms_workflows/css/forms.css

@@ -3,30 +3,31 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* ── Side-by-side field alignment ────────────────────────────────────────
-   When two half-width fields sit in a .row, the shorter one needs to
-   bottom-align its input with the taller one regardless of label length,
-   help-text presence, or wrapped text.  We use flex-column + stretch so
-   the label area grows evenly and the input sits at a consistent position. */
-
-.row.align-items-start > [class*="col-"] > .mb-3,
-.row.align-items-start > .field-wrapper > .mb-3 {
+   When two or more fields sit in a .row.fields-aligned-row, columns
+   stretch to equal height (the default flex behaviour). Each .mb-3
+   wrapper becomes a flex column so the label area grows evenly and
+   the input sits at a consistent vertical position regardless of
+   label length, help-text presence, or wrapped text. */
+
+.row.fields-aligned-row > [class*="col-"] > .mb-3,
+.row.fields-aligned-row > .field-wrapper > .mb-3 {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
-.row.align-items-start > [class*="col-"] > .mb-3 > label,
-.row.align-items-start > .field-wrapper > .mb-3 > label {
+.row.fields-aligned-row > [class*="col-"] > .mb-3 > label,
+.row.fields-aligned-row > .field-wrapper > .mb-3 > label {
     flex-shrink: 0;
 }
-.row.align-items-start > [class*="col-"] > .mb-3 > .form-control,
-.row.align-items-start > [class*="col-"] > .mb-3 > .form-select,
-.row.align-items-start > .field-wrapper > .mb-3 > .form-control,
-.row.align-items-start > .field-wrapper > .mb-3 > .form-select {
+.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;        /* push the input to the bottom of the cell */
 }
 /* Help text sits *after* the input and shouldn't shift it up */
-.row.align-items-start > [class*="col-"] > .mb-3 > .form-text,
-.row.align-items-start > .field-wrapper > .mb-3 > .form-text {
+.row.fields-aligned-row > [class*="col-"] > .mb-3 > .form-text,
+.row.fields-aligned-row > .field-wrapper > .mb-3 > .form-text {
     flex-shrink: 0;
     min-height: 1.4em;       /* reserve space even when empty for alignment */
 }

pyproject.toml

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