How to correctly position the text relative to the image?

Question

css

I'm flipping an old project and it has the following image:

What's the best way to position the text so that each heading is relative to the elements of the image? The image is in vector graphics format. I used to do it using js (dynamically adjusted the height of blocks with text), but I don’t like this option. I also considered the option to put the text in svg, but there are difficulties with multi-line display, and foreignObject has too low browser support. Any suggestions?

Answer 1

Do I understand correctly that the red figures are on the same level as the title? if so then :after for headings and that's it

Answer 2

It can add a pseudo-element to the headers, set this icon with a tail for it and position it.