Implementing secret answers to mystery questions via CSS styles

For my children, I often devise some "mystery questions" they need to resolve and I want to put those together on a page of this blog (it will be in French, sorry). Now I was looking for how to indicate the solution for the mysteries without it being revealed automatically. Here is an example:

I speak without a mouth and hear without ears. I have no body, but I come alive with the wind. What am I?

(oɥɔǝ uɐ)The solution ->

CSS implementation

I implemented this using the site CSS style sheet by adding a .HideBox definition:

.HideBox {
  color: #cae596;
  background-color: #cae596;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
  display: inline-block; /* Ensure background color covers only the width of the text */
  padding: 1px; /* Add padding for spacing */
  float: right; /* Align text to the right */
}

.HideBox:hover {
  color: #c8b48c;
  background-color: #2a2d3d;
}

I can then in a given blog post add this snippet to insert the solution:

#+BEGIN_EXPORT html
<span class="HideBox">(oɥɔǝ uɐ)</span><span style="float: right;">The solution&nbsp;->&nbsp;</span><br>
#+END_EXPORT