diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
index 3c855a2..43e65bf 100644
--- a/html/hot_people_who_eat_croissants_are_dangerous.tsx
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -3,7 +3,8 @@ import { Html, debug_render, render } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
 
 const peopleify = (...people: string[]): string[] =>
-    people.map(p => `${p} people`);
+    // non-breaking space v
+    people.map(p => `${p}\u202fpeople`);
 
 const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
 
@@ -52,12 +53,12 @@ function weird_slices<T>(arr: T[]): T[][] {
 }
 
 const MultiWheel: Component = ({ items }, _) => (
-    <div class="multiwheel">
+    <span class="multiwheel">
         {...weird_slices(items).map(items => (
-            <Wheel items={items} width={1 / items.length} />
+            <Wheel items={items} /*width={1 / items.length}*/ />
         ))}
         <Wheel items={items} classes={["invisible"]} />
-    </div>
+    </span>
 );
 
 // i'll probably just hardcode the delays... lame but w/e
@@ -65,8 +66,8 @@ const MultiWheel: Component = ({ items }, _) => (
 // it would be possible to have it so the final text is actually properyly selectable maybe but eh
 const Take: Component = ({ subjects, objects, adjectives }, _) => (
     <div class="take">
-        <MultiWheel items={subjects} /> <div class="bridge">who eat</div>{" "}
-        <MultiWheel items={objects} /> <div class="bridge">are</div>{" "}
+        <MultiWheel items={subjects} /> <span class="bridge">who eat</span>{" "}
+        <MultiWheel items={objects} /> <span class="bridge">are</span>{" "}
         <MultiWheel items={adjectives} />
     </div>
 );