Keeping relative size of UI elements constant without moving them

Ok, I feel like I’m not really getting the way anchoring works in the Unity UI System, so I apologize in advance if this is a stupid question.

I have a basic UI Layout, as seen in this picture :

A Screen Overlay canvas and 3 panels. Very simple. Now, when I designed my UI on paper, I gave each element a horizontal and vertical size depending on the screen size. Both boxes in the corners should have a width of 22%, a height of 25% and the long panel should have a width of 56% and a height of 15%. This was easy to implement with the scale attribute of the UI elements, so far so good.

But when the screen size changes, the objects always either move around, or stay the same size. I’ve tried just about every anchor combination for each element but it hasn’t worked out yet. “bottom/stretch” seems to work for the long panel but with the other two I’m completely lost.

I want these 3 panels to stay in the same relative screen positions (both boxes “start” in the corner, the long panel “starts” in the bottom center), but they should also scale with the screen so the relative screen size stays the same too

This is probably a very simple question, I’ve just never worked with the unity UI system before and the documentation didn’t really help me.

Check this thing
https://docs.unity3d.com/Manual/script-CanvasScaler.html
Hope it helps.