app/components/EventTicketPurchase.vue

@@ -154,17 +154,19 @@
             securely
           </p>
 
-          <label class="consent-field">
+          <div class="consent-block">
-            <input
+            <label class="consent-field">
-              v-model="form.createAccount"
+              <input
-              type="checkbox"
+                v-model="form.createAccount"
-              :disabled="processing"
+                type="checkbox"
-            >
+                :disabled="processing"
-            <span>Create a free guest account so I can manage my registration</span>
+              >
-          </label>
+              <span>Create a free guest account so I can manage my registration</span>
-          <p class="field-hint consent-hint">
+            </label>
-            Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
+            <p class="field-hint consent-hint">
-          </p>
+              Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
+            </p>
+          </div>
 
           <button
             type="submit"
@@ -450,22 +452,26 @@ const formatEventDate = (date) => {
   margin-top: 2px;
 }
 
-.consent-field {
+.consent-block {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: flex-start;
-  gap: 8px;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-bottom: 14px;
+}
+.consent-field {
+  display: contents;
   font-size: 12px;
   color: var(--text);
-  margin-bottom: 4px;
   cursor: pointer;
 }
 .consent-field input[type="checkbox"] {
   margin-top: 3px;
-  flex-shrink: 0;
   accent-color: var(--candle);
 }
 .consent-hint {
-  margin-bottom: 14px;
+  grid-column: 2;
-  padding-left: 24px;
+  margin: 0;
 }
 </style>