How to make a header like this?

Question

css

Desktop
Adaptive
Can you tell me how to layout this header? On desktop I made it in two parts via p, gave the second p text-align: right and added a delimiter via ::before. And in principle, I didn’t have any problems here (I think this is not the best option, but I did it as best I could). Now, when this heading needs to be made adaptive, then complexity appears.
I removed the text-align from the second p and just gave them different padding-lefts to achieve the result shown in the screenshot, but this padding often needs to be adjusted in the media so that it always stays something like the screenshot. Plus, the separator also constantly needs to adjust the position.
Sorry for my noobness, I hope you can help and explain how to type this more professionally.
Here is a link to the github with this title https://github.com/Fotoz/surface
ps add. question: "when you adapt the layout, is it enough to go through the main points of 1200px,. 992px, etc., or do you need everything to be perfect everywhere?"

Answer 1

On desktop I made it in two parts via p, gave the second p text-align: right and added a delimiter via ::before.

Why didn't you like h1? Inside, you can span with display: block, and everything will be semantically.
The variant from the second picture is done with max-width, no padding. ::before only needs to be positioned once, and the parent needs to be positioned: relative.
It is necessary that everything be perfect, but in the end you go through the points anyway, it is desirable not to have breakpoints that do not correspond to predetermined breakpoints at all (although there are exceptions). @media

Answer 2

You don't need to typeset, you need two bitmaps switched by a media expression.