diff --git a/datasette/templates/_permission_ui_styles.html b/datasette/templates/_permission_ui_styles.html
index 893e89b8..21a2ea8f 100644
--- a/datasette/templates/_permission_ui_styles.html
+++ b/datasette/templates/_permission_ui_styles.html
@@ -9,6 +9,15 @@
 .permission-form form {
     max-width: 60rem;
 }
+.permission-form-grid {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.permission-form-result {
+    margin-top: 1rem;
+    max-width: 60rem;
+}
 .form-section {
     margin-bottom: 1.25em;
 }
@@ -174,4 +183,9 @@
     text-align: center;
     color: #666;
 }
+@media only screen and (max-width: 576px) {
+    .permission-form-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
 </style>
diff --git a/datasette/templates/allow_debug.html b/datasette/templates/allow_debug.html
index 86ab13a3..fda4032c 100644
--- a/datasette/templates/allow_debug.html
+++ b/datasette/templates/allow_debug.html
@@ -5,21 +5,9 @@
 {% block extra_head %}
 {% include "_permission_ui_styles.html" %}
 <style>
-.two-col {
-    display: inline-block;
-    width: 48%;
-}
-.two-col label {
-    width: 48%;
-}
 p.message-warning {
     white-space: pre-wrap;
 }
-@media only screen and (max-width: 576px) {
-    .two-col {
-        width: 100%;
-    }
-}
 </style>
 {% endblock %}
 
@@ -32,24 +20,28 @@ p.message-warning {
 
 <p>Use this tool to try out different actor and allow combinations. See <a href="https://docs.datasette.io/en/stable/authentication.html#defining-permissions-with-allow-blocks">Defining permissions with "allow" blocks</a> for documentation.</p>
 
-<form class="core" action="{{ urls.path('-/allow-debug') }}" method="get" style="margin-bottom: 1em">
-    <div class="two-col">
-        <p><label>Allow block</label></p>
-        <textarea class="permission-textarea" name="allow">{{ allow_input }}</textarea>
-    </div>
-    <div class="two-col">
-        <p><label>Actor</label></p>
-        <textarea class="permission-textarea" name="actor">{{ actor_input }}</textarea>
-    </div>
-    <div style="margin-top: 1em;">
-        <input type="submit" value="Apply allow block to actor">
-    </div>
-</form>
+<div class="permission-form">
+    <form class="core" action="{{ urls.path('-/allow-debug') }}" method="get">
+        <div class="permission-form-grid">
+            <div class="form-section">
+                <label for="allow-block">Allow block</label>
+                <textarea class="permission-textarea" id="allow-block" name="allow">{{ allow_input }}</textarea>
+            </div>
+            <div class="form-section">
+                <label for="allow-actor">Actor</label>
+                <textarea class="permission-textarea" id="allow-actor" name="actor">{{ actor_input }}</textarea>
+            </div>
+        </div>
+        <div class="form-actions">
+            <button type="submit" class="submit-btn">Apply allow block to actor</button>
+        </div>
+    </form>
 
-{% if error %}<p class="message-warning">{{ error }}</p>{% endif %}
+    {% if error %}<p class="message-warning permission-form-result">{{ error }}</p>{% endif %}
 
-{% if result == "True" %}<p class="message-info">Result: allow</p>{% endif %}
+    {% if result == "True" %}<p class="message-info permission-form-result">Result: allow</p>{% endif %}
 
-{% if result == "False" %}<p class="message-error">Result: deny</p>{% endif %}
+    {% if result == "False" %}<p class="message-error permission-form-result">Result: deny</p>{% endif %}
+</div>
 
 {% endblock %}
diff --git a/datasette/templates/debug_permissions_playground.html b/datasette/templates/debug_permissions_playground.html
index 870b1658..8b0cbbcf 100644
--- a/datasette/templates/debug_permissions_playground.html
+++ b/datasette/templates/debug_permissions_playground.html
@@ -20,18 +20,6 @@
 .check-action, .check-when, .check-result {
     font-size: 1.3em;
 }
-.two-col {
-    display: inline-block;
-    width: 48%;
-}
-.two-col label {
-    width: 48%;
-}
-@media only screen and (max-width: 576px) {
-    .two-col {
-        width: 100%;
-    }
-}
 </style>
 {% endblock %}
 
@@ -47,28 +35,30 @@
 
 <div class="permission-form">
     <form action="{{ urls.path('-/permissions') }}" id="debug-post" method="post">
-        <div class="two-col">
-            <div class="form-section">
-                <label>Actor</label>
-                <textarea class="permission-textarea" name="actor">{% if actor_input %}{{ actor_input }}{% else %}{"id": "root"}{% endif %}</textarea>
+        <div class="permission-form-grid">
+            <div>
+                <div class="form-section">
+                    <label for="activity-actor">Actor</label>
+                    <textarea class="permission-textarea" id="activity-actor" name="actor">{% if actor_input %}{{ actor_input }}{% else %}{"id": "root"}{% endif %}</textarea>
+                </div>
             </div>
-        </div>
-        <div class="two-col" style="vertical-align: top">
-            <div class="form-section">
-                <label for="permission">Action</label>
-                <select name="permission" id="permission">
-                    {% for permission in permissions %}
-                        <option value="{{ permission.name }}">{{ permission.name }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="form-section">
-                <label for="resource_1">Parent</label>
-                <input type="text" id="resource_1" name="resource_1" placeholder="e.g., database name">
-            </div>
-            <div class="form-section">
-                <label for="resource_2">Child</label>
-                <input type="text" id="resource_2" name="resource_2" placeholder="e.g., table name">
+            <div>
+                <div class="form-section">
+                    <label for="permission">Action</label>
+                    <select name="permission" id="permission">
+                        {% for permission in permissions %}
+                            <option value="{{ permission.name }}">{{ permission.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="form-section">
+                    <label for="resource_1">Parent</label>
+                    <input type="text" id="resource_1" name="resource_1" placeholder="e.g., database name">
+                </div>
+                <div class="form-section">
+                    <label for="resource_2">Child</label>
+                    <input type="text" id="resource_2" name="resource_2" placeholder="e.g., table name">
+                </div>
             </div>
         </div>
         <div class="form-actions">