[4.2.x] Fixed #34383 -- Fixed layout of admin fieldsets with multiple fields on the same line.

Thanks Antonio Candido Nazareth junior for the report.

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

Co-authored-by: Mariusz Felisiak <felisiak.mariusz@gmail.com>

Backport of d687febce5868545f99974d2499a91f81a32fef5 from main

8 files changed, 43 insertions, 38 deletions

diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
index 3cd87ef476..88a74441a0 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -22,11 +22,15 @@ form .form-row p {
     padding-left: 0;
 }
 
-.form-row > div {
+.flex-container {
     display: flex;
     flex-wrap: wrap;
 }
 
+.form-multiline > div {
+    padding-bottom: 10px;
+}
+
 /* FORM LABELS */
 
 label {
@@ -191,7 +195,6 @@ form .aligned table p {
 }
 
 fieldset .fieldBox {
-    float: left;
     margin-right: 20px;
 }
 
diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
index dde679bd7c..3facdcd0a9 100644
--- a/django/contrib/admin/static/admin/css/responsive.css
+++ b/django/contrib/admin/static/admin/css/responsive.css
@@ -390,10 +390,6 @@ input[type="submit"], button {
         display: none;
     }
 
-    form .form-row p.datetime {
-        width: 100%;
-    }
-
     .datetime input {
         width: 50%;
         max-width: 120px;
@@ -564,8 +560,6 @@ input[type="submit"], button {
 
     .aligned .form-row,
     .aligned .form-row > div {
-        display: flex;
-        flex-wrap: wrap;
         max-width: 100vw;
     }
 
@@ -573,6 +567,10 @@ input[type="submit"], button {
         width: calc(100vw - 30px);
     }
 
+    .flex-container {
+        flex-flow: column;
+    }
+
     textarea {
         max-width: none;
     }
diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css
index 08989b54e2..800f943ee4 100644
--- a/django/contrib/admin/static/admin/css/rtl.css
+++ b/django/contrib/admin/static/admin/css/rtl.css
@@ -170,7 +170,6 @@ form .wide input + div.help {
 }
 
 fieldset .fieldBox {
-    float: right;
     margin-left: 20px;
     margin-right: 0;
 }
diff --git a/django/contrib/admin/templates/admin/auth/user/change_password.html b/django/contrib/admin/templates/admin/auth/user/change_password.html
index f9681ba2d2..5a5cc2ef27 100644
--- a/django/contrib/admin/templates/admin/auth/user/change_password.html
+++ b/django/contrib/admin/templates/admin/auth/user/change_password.html
@@ -32,7 +32,7 @@
 
 <div class="form-row">
   {{ form.password1.errors }}
-  <div>{{ form.password1.label_tag }} {{ form.password1 }}</div>
+  <div class="flex-container">{{ form.password1.label_tag }} {{ form.password1 }}</div>
   {% if form.password1.help_text %}
   <div class="help"{% if form.password1.id_for_label %} id="{{ form.password1.id_for_label }}_helptext">{% endif %}{{ form.password1.help_text|safe }}</div>
   {% endif %}
@@ -40,7 +40,7 @@
 
 <div class="form-row">
   {{ form.password2.errors }}
-  <div>{{ form.password2.label_tag }} {{ form.password2 }}</div>
+  <div class="flex-container">{{ form.password2.label_tag }} {{ form.password2 }}</div>
   {% if form.password2.help_text %}
   <div class="help"{% if form.password2.id_for_label %} id="{{ form.password2.id_for_label }}_helptext"{% endif %}>{{ form.password2.help_text|safe }}</div>
   {% endif %}
diff --git a/django/contrib/admin/templates/admin/includes/fieldset.html b/django/contrib/admin/templates/admin/includes/fieldset.html
index 5953a5ad3d..9a4372f791 100644
--- a/django/contrib/admin/templates/admin/includes/fieldset.html
+++ b/django/contrib/admin/templates/admin/includes/fieldset.html
@@ -5,27 +5,30 @@
     {% endif %}
     {% for line in fieldset %}
         <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
-            {% if line.fields|length == 1 %}{{ line.errors }}{% endif %}
+            {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %}
             {% for field in line %}
-                <div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
+                <div>
                     {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
-                    {% if field.is_checkbox %}
-                        {{ field.field }}{{ field.label_tag }}
-                    {% else %}
-                        {{ field.label_tag }}
-                        {% if field.is_readonly %}
-                            <div class="readonly">{{ field.contents }}</div>
-                        {% else %}
-                            {{ field.field }}
-                        {% endif %}
+                        <div class="flex-container{% if not line.fields|length == 1 %} fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}{% elif field.is_checkbox %} checkbox-row{% endif %}">
+                            {% if field.is_checkbox %}
+                                {{ field.field }}{{ field.label_tag }}
+                            {% else %}
+                                {{ field.label_tag }}
+                                {% if field.is_readonly %}
+                                    <div class="readonly">{{ field.contents }}</div>
+                                {% else %}
+                                    {{ field.field }}
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    {% if field.field.help_text %}
+                        <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+                            <div>{{ field.field.help_text|safe }}</div>
+                        </div>
                     {% endif %}
                 </div>
-                {% if field.field.help_text %}
-                    <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
-                        <div>{{ field.field.help_text|safe }}</div>
-                    </div>
-                {% endif %}
             {% endfor %}
+            {% if not line.fields|length == 1 %}</div>{% endif %}
         </div>
     {% endfor %}
 </fieldset>
diff --git a/django/contrib/admin/templates/registration/password_change_form.html b/django/contrib/admin/templates/registration/password_change_form.html
index 73bafbb4ac..fde2373e08 100644
--- a/django/contrib/admin/templates/registration/password_change_form.html
+++ b/django/contrib/admin/templates/registration/password_change_form.html
@@ -33,12 +33,12 @@
 
 <div class="form-row">
     {{ form.old_password.errors }}
-    <div>{{ form.old_password.label_tag }} {{ form.old_password }}</div>
+    <div class="flex-container">{{ form.old_password.label_tag }} {{ form.old_password }}</div>
 </div>
 
 <div class="form-row">
     {{ form.new_password1.errors }}
-    <div>{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div>
+    <div class="flex-container">{{ form.new_password1.label_tag }} {{ form.new_password1 }}</div>
     {% if form.new_password1.help_text %}
     <div class="help"{% if form.new_password1.id_for_label %} id="{{ form.new_password1.id_for_label }}_helptext"{% endif %}>{{ form.new_password1.help_text|safe }}</div>
     {% endif %}
@@ -46,7 +46,7 @@
 
 <div class="form-row">
     {{ form.new_password2.errors }}
-    <div>{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div>
+    <div class="flex-container">{{ form.new_password2.label_tag }} {{ form.new_password2 }}</div>
     {% if form.new_password2.help_text %}
     <div class="help"{% if form.new_password2.id_for_label %} id="{{ form.new_password2.id_for_label }}_helptext"{% endif %}>{{ form.new_password2.help_text|safe }}</div>
     {% endif %}
diff --git a/tests/admin_inlines/tests.py b/tests/admin_inlines/tests.py
index 2d76509515..0be8d665d1 100644
--- a/tests/admin_inlines/tests.py
+++ b/tests/admin_inlines/tests.py
@@ -353,13 +353,13 @@ class TestInline(TestDataMixin, TestCase):
         )
         # The div containing the position field is hidden.
         self.assertInHTML(
-            '<div class="fieldBox field-position hidden">'
+            '<div class="flex-container fieldBox field-position hidden">'
             '<label class="inline">Position:</label>'
             '<div class="readonly">0</div></div>',
             response.rendered_content,
         )
         self.assertInHTML(
-            '<div class="fieldBox field-position hidden">'
+            '<div class="flex-container fieldBox field-position hidden">'
             '<label class="inline">Position:</label>'
             '<div class="readonly">1</div></div>',
             response.rendered_content,
@@ -382,14 +382,14 @@ class TestInline(TestDataMixin, TestCase):
         # The whole line containing position field is hidden.
         self.assertInHTML(
             '<div class="form-row hidden field-position">'
-            "<div><label>Position:</label>"
-            '<div class="readonly">0</div></div></div>',
+            '<div><div class="flex-container"><label>Position:</label>'
+            '<div class="readonly">0</div></div></div></div>',
             response.rendered_content,
         )
         self.assertInHTML(
             '<div class="form-row hidden field-position">'
-            "<div><label>Position:</label>"
-            '<div class="readonly">1</div></div></div>',
+            '<div><div class="flex-container"><label>Position:</label>'
+            '<div class="readonly">1</div></div></div></div>',
             response.rendered_content,
         )
 
diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py
index 6bda6a2a7d..9c20ce2e2e 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -8076,11 +8076,13 @@ class TestLabelVisibility(TestCase):
         self.assert_field_visible(response, "second")
 
     def assert_field_visible(self, response, field_name):
-        self.assertContains(response, '<div class="fieldBox field-%s">' % field_name)
+        self.assertContains(
+            response, f'<div class="flex-container fieldBox field-{field_name}">'
+        )
 
     def assert_field_hidden(self, response, field_name):
         self.assertContains(
-            response, '<div class="fieldBox field-%s hidden">' % field_name
+            response, f'<div class="flex-container fieldBox field-{field_name} hidden">'
         )
 
     def assert_fieldline_visible(self, response):