diff --git a/client/src/lit/interactive-example/index.js b/client/src/lit/interactive-example/index.js
index a94c02dbb074..66b587df7c61 100644
--- a/client/src/lit/interactive-example/index.js
+++ b/client/src/lit/interactive-example/index.js
@@ -118,9 +118,10 @@ export class InteractiveExample extends GleanMixin(LitElement) {
     // TODO: use a different event handler for editor update event
     // TODO: deal with update race conditions (editor updates after user clicks on different editor)
     if (target instanceof PlayEditor) {
+      const choice = target.closest(".choice");
       this.choiceSelected = Array.prototype.indexOf.call(
-        target.parentNode?.children,
-        target
+        choice?.parentNode?.children,
+        choice
       );
 
       // TODO: nicer interface for posting messages than this:
@@ -218,12 +219,17 @@ export class InteractiveExample extends GleanMixin(LitElement) {
         >
           ${this._choices?.map(
             (code, index) => html`
-              <play-editor
-                language="css"
-                minimal="true"
-                .value=${code?.trim()}
-                class=${index === this.choiceSelected ? "selected" : ""}
-              ></play-editor>
+              <div
+                class=${index === this.choiceSelected
+                  ? "choice selected"
+                  : "choice"}
+              >
+                <play-editor
+                  language="css"
+                  minimal="true"
+                  .value=${code?.trim()}
+                ></play-editor>
+              </div>
             `
           )}
         </div>
diff --git a/client/src/lit/interactive-example/index.scss b/client/src/lit/interactive-example/index.scss
index d17832fc9c16..7d3929727ffa 100644
--- a/client/src/lit/interactive-example/index.scss
+++ b/client/src/lit/interactive-example/index.scss
@@ -209,17 +209,47 @@ tab-wrapper {
     gap: 0.4rem;
     grid-area: choice;
     padding: 1rem;
+    padding-right: 0rem;
 
-    play-editor {
-      background: var(--background-secondary);
-      border: 1px solid var(--border-secondary);
-      border-radius: var(--elem-radius);
-      cursor: pointer;
+    .choice {
+      --field-focus-border: #0085f2;
+      --focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);
+
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+
+      &::after {
+        color: var(--field-focus-border);
+        content: "▸";
+        font-size: 0.6875rem;
+        padding: 0;
+        padding-left: 0.25rem;
+        padding-right: 1.25rem;
+        opacity: 0;
+      }
 
       &.selected {
-        border-color: #0085f2; // var(--field-focus-border);
-        box-shadow: 0 0 0 3px rgba(0, 144, 237, 0.4); // var(--focus-01);
-        cursor: text;
+        play-editor {
+          border-color: var(--field-focus-border);
+          box-shadow: var(--focus-01);
+          cursor: text;
+        }
+
+        &::after {
+          opacity: 1;
+          padding-left: 0.75rem;
+          padding-right: 0.75rem;
+          transition: all 0.2s ease-out;
+        }
+      }
+
+      play-editor {
+        background: var(--background-secondary);
+        border: 1px solid var(--border-secondary);
+        border-radius: var(--elem-radius);
+        cursor: pointer;
+        width: 100%;
       }
     }
   }