[Jellby]

I'd try hanging indent, in the Q/A fragment. With CSS it could be something like:

p { margin-left: 1em; text-indent: -1em; }
p.continuation { text-indent: 0; }
p.note { margin: 0.5em 2em; font-style: italic; }
span.speaker { font-weight: bold; }

<p><span class="speaker">Mr. Whatever</span>: This is someone speaking.</p>
<p class="continuation">This is another paragraph spoken by the same person.</p>

<p class="note">This is a transcriber's note, explanation or remark</p>

<p><span class="speaker">Mr. Something</span>: This is a second person speaking.</p>

Note the p.continuation has no negative indent in the first line, and the p.note has some vertical margin, as well as wider left and right margins.