diff --git a/static/td.css b/static/td.css
index 2ab5fcbd9b2c32b37fa97fb811524d34a18047da..f73d878abf7e5ebf61e5005af66ee649598b6e81 100644
--- a/static/td.css
+++ b/static/td.css
@@ -50,6 +50,16 @@ code, pre, .mono { font-family: var(--font-mono); }
   transform: translateX(-50%);
   top: 0;
 }
+.task-title {
+  display: inline;
+  margin-inline-end: var(--space-2);
+}
+.task-title + .badge {
+  vertical-align: text-bottom;
+}
+.card > header:has(.task-title) {
+  margin-block-end: var(--space-6);
+}
 details:has(> .table) {
   overflow: visible;
 }
diff --git a/templates/task.html b/templates/task.html
index b04bcc954f6a5a7e5c279ec0b167599d1a9941f9..d0751b01d222f27691f84ff08e23198571962a80 100644
--- a/templates/task.html
+++ b/templates/task.html
@@ -18,8 +18,8 @@
 </nav>
 
 <article class="card mt-4">
-  <header class="hstack items-center gap-2">
-    <h1>{{ task.title }}</h1>
+  <header>
+    <h1 class="task-title">{{ task.title }}</h1>
     <span class="badge{% if task.status == "closed" %} success{% elif task.status == "in_progress" %} secondary{% endif %}">{{ task.status }}</span>
   </header>