How to label code block evaluations in orgmode on html export?

If I have a code block in orgmode, I can export its evaluation by using the :exports both option.

#+begin_src cpp -n :includes <iostream> :exports both
std::cout << "Hello there";
#+end_src

#+RESULTS:
: Hello there

When I export to html (C-c C-e h o), the result block follows the code block. However, I would like to more explicitly show that the 2nd block is the result of the first, with say, a simple label.

If I modify the above, like so:

#+begin_src cpp -n :includes <iostream> :exports both
std::cout << "Hello there";
#+end_src

Output:

#+RESULTS:
: Hello there

then the label "Output:" appears, but the result block appears twice -- once before the label, and once after. What's worse is that if I run the code within orgmode (C-c C-c), then a second result block is placed before the text label, "Output:". I suspect this is what's happening on export as well.

I have also noticed that when exporting to html, the result blocks are placed in a pre tags of class example. I thought I could modify the css with something like:

pre.example::before { content: "Output:"; }

but unfortunately, this places the text inside the pre block, and I can't add any line breaks.

Is there any simple way to add text labels to result blocks in either orgmode itself, or perhaps through css? I'd like to avoid javascript if possible.