Creating FAQ toggles and HTML elements in the block editor

Hi Tom and team

My question is if I want a container to be a named element, like <article>, <about>, <details>, or <summary>, how do I do it in the block editor? Maybe I have missed something really basic, but I cannot see how.

The reason I ask is that I want an FAQ style toggle, and the best non-plugin and non-javascript method I can find is just to use the simple HTML code:

<details>
  <summary><h3>The heading or question</h3></summary>
  <p>
    The details or answer.
  </p>
</details>

For the open/close toggle to line up with the heading, it needs the CSS

details summary h3 {
	display: inline-block
}

It means I need to create the necessary <details> and <summary> containers.

As I could not see how in the block editor, I simply used an HTML code block with the code <details> and <summary>, and their cancellations, either side of the text. It works. But when you leave the editor and come back, the blocks shows as a block error, presumably because each block only has the start or the end of the container. That also means I can't save the sequence as a reusable block.

I'm sure I'm not the first to ask this, so I assume I've missed something. It seems surprising that someone hasn't created a FAQ style block with this code. (Yoast's FAQ block doesn't use toggles, just headings and details.)

Please suggest a way to do this, or even better create the FAQ block!

Thank you.