Percentage units can be used when
we want the size of the children elements to be
dependent on the size of their parent elements.
Take a look at this example:
Here, you can see that providing width of the
blocks in percentage helps create a relationship
between the width of the children and the width of
the parent.
The smaller block will always be 20% of the parent's width
and the larger block will always be 70% of the parent's width.
This way, the proportion will always be maintained no matter
how the parent's size gets changed.
Try changing the size of the parent
from 500px to 400px or 600px to
see percentage in action.