prevent glossary to cause line breaks

app/src/components/Glossary.astro

@@ -30,7 +30,7 @@ const {
 const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
 ---
 
-<div class="glossary-container" data-glossary-container-id={tooltipId}>
+<span class="glossary-container" data-glossary-container-id={tooltipId}>
   <span
     class={`glossary-term ${className}`}
     style={inlineStyle}
@@ -47,7 +47,7 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
     {term}
   </span>
 
-  <div
+  <span
     id={`${tooltipId}-tooltip`}
     class="glossary-tooltip"
     data-glossary-tooltip-id={tooltipId}
@@ -55,13 +55,13 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
     role="tooltip"
     aria-hidden="true"
   >
-    <div class="glossary-tooltip__content">
-      <div class="glossary-tooltip__term">{term}</div>
-      <div class="glossary-tooltip__definition">{definition}</div>
-    </div>
-    <div class="glossary-tooltip__arrow"></div>
-  </div>
-</div>
+    <span class="glossary-tooltip__content">
+      <span class="glossary-tooltip__term">{term}</span>
+      <span class="glossary-tooltip__definition">{definition}</span>
+    </span>
+    <span class="glossary-tooltip__arrow"></span>
+  </span>
+</span>
 
 <script is:inline>
   // Global script for all Glossary tooltips
@@ -196,6 +196,7 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
   }
 
   .glossary-tooltip__content {
+    display: block;
     background: var(--surface-bg);
     border: 1px solid var(--border-color);
     border-radius: 8px 8px 0 0;
@@ -207,6 +208,7 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
   }
 
   .glossary-tooltip__term {
+    display: block;
     font-weight: 600;
     font-size: 14px;
     color: var(--primary-color);
@@ -215,6 +217,7 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
   }
 
   .glossary-tooltip__definition {
+    display: block;
     font-size: 13px;
     color: var(--text-color);
     line-height: 1.4;
@@ -222,6 +225,7 @@ const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
   }
 
   .glossary-tooltip__arrow {
+    display: block;
     position: absolute;
     width: 0;
     height: 0;