'Split parent's remaining width space between child elements with CSS

I have a parent div with relative a width (100%), with 2 child div in it. The child elements width are based on the content in them. Let's say child1 has a content which makes child1 width to the 20% of the parent's width. The child2's content makes it 40%. So basically the parent has 40% remaining space.

What I would like to achieve is to split the remaining space between the child elements evenly (by increasing their width). So child1 should be 20% + 40/2 = 40% and child2 should be 40% + 40/2 = 60%.

The whole thing should based on the content of the child elements, so only relative units are ok. Is this something possible to achieve with pure CSS?

enter image description here

htmlcssresponsive-design


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions