The idea is based on capa <clarification> nodes: https://github.com/edx/edx-platform/pull/6679

I decided to go with <span class="pb-clarification> instead of a custom <clarification>
node because supporting clarifications inside the html child block was a requirement,
but the html block is defined inside edx-platform and we aren't able to preprocess the contents
of the html block from within problem-builder.
Even if we were able to get a patch for html block to support <clarification> elements upstream,
I wouldn't feel very comfortable with that idea since the html block is supposed to contain
plain html and making it recognize and preprocess custom elements wouldn't feel right.

The best way to implement this would probably be custom DOM elements (document.registerElement),
but browser support is not there yet and there are no reliable polyfills.