I have created an app UI as shown in the pic below:

The top is a Paragraph (occupy 27% of screen), center is a Chart (45%), bottom is a Table (27%).

How to make them align properly across different screen size?

Currently, the three elements are overlapped when I change the screen size. It only works in 1920 x 1080.

Using @media only screen and (min-width) and (min-height) is not efficient.

What is the approach to define the percentage of elements size and make them position properly across different screen size? (Not to predict the different possibilities of the screen size)

Thank you.