This is a simple demo of how a container can change layout based on the size of its parent and not
the viewport width or height.
This is usefull for dynamic containers that can be placed anywhere so having them
responsive to the viewport size is not an option.
This is all done using only CSS and no Javascript
There are 3 examples. Each one has a resizable container and a threashold input you can change. Plus
a description of the default layout
When the container width is bigger than the threashold, the default layout will be applied.
For ex: 33%, 33%, 33% means the 3 elements (with red borders) will take each 33% of the
container
When the container width is less than the threashold, the elements inside it will stack on top of
each other