How to implement such a framework structure with adaptability?

Question

css

Hello everyone, friends!
There is this layout:

The content is aligned in the middle.
The whole problem is in the header: the central part is aligned in the middle, and the right and left parts are scattered on the sides.
The width of the right and left columns are unknown. The central part is equal to the width of the content, let's say 1200px.
When adaptive, the right and left columns move the central part by the appropriate distance:

How to do this?
If the central part is given:

max-width: 1200px;
margin: 0 auto;

and scatter the right and left parts using float, or using position: absolut; and left: 0 and right: 0 for the corresponding sides, then nothing will work with adaptability, because with float, the blocks will be transferred to different lines, and with positioning they will climb on top of each other.
In general, here https://jsfiddle.net/lokdmt/upn3d3rg/ threw in the structure, I think I explained it clearly.
PS I do not necessarily ask you to decide for me, I will be glad at least just for advice where to look. Thank you!
PPS I know the "Mark as solved" button, so I won't forget to thank you)

Answer 1

Switch to flex, forget about this fuck already... IE
https://codepen.io/svassr/pen/gbeGaw