Two panels to fit the size of the parent panel in Portret mode.

Hi, I am trying to learn Unity UI, but the more I dig I realize how complex it is. I would like to achieve the following from the image 1: This would be the simple scene with a single window. I need it to work only in portrait mode.

1. There are several objects in here: 'Canvas', 'Panel', 'TitlePanel', 'ContentPanel'. 'TitlePanel' has the UI.Text 'Title', and 'ContentPanel' has UI.Text 'Text'.

2. It need to work for multiple resolutions in portrait mode.

3. It need to follow the aspect ratio of 'Panel' in regard to 'Canvas'. You note that '4a', 'a', 'a', 'a' from the image represent the gutter. Gutter on the top is '4a', and all other is just 'a'. Gutter 'a' should not be expressed in pixels, rather it should be adjusted somehow based on scaling. I used the 'Canvas' component Canvas Scaler in Scale With Screen Size mode. (If there would be only 'Canvas' and 'Panel' elements that would work for me)

4. I found problems when I wanted to set the 'TitlePanel' and 'ContentPanel' to fit into the 'Panel'. It looks easy for the parent to adjust to child elements width and height, but the opposite -- for the children to fit the parent is hard.

5. I wanted the 'TitlePanel' to have fixed height of 100px. This would be for the reference resolution in Canvas Scaler set to 600x1024. The width of the 'TitlePanel' I wanted to follow the size of the parent.

6. For the 'ContentPanel' I wanted to use all the height below the 'TitlePanel'.

7. I found that there may be the problem of non uniform scaling which I am unable to track and resolve with upper scenario with Canvas Scaler.

Simplified, I wanted the 'Panel' to scale in different resolution and all the visual elements inside the 'Panel' should best-fit (scale) in proportion with the screen and all gutters '4a', 'a', 'a', 'a' would ideally remain in proportion.

I still haven't found the solution, and I wonder if there is some Unity package containing example test scenes from where I can start.