title: Split parent's remaining width space between child elements with CSS
body: <p>I have a parent <code>div</code> with relative a width (100%), with 2 child <code>div</code> in it. The child elements width are based on the content in them. Let's say <code>child1</code> has a content which makes <code>child1</code> width to the 20% of the parent's width. The <code>child2</code>'s content makes it 40%. So basically the parent has 40% remaining space.</p>
  <p>What I would like to achieve is to split the remaining space between the child elements evenly (by increasing their width). So <code>child1</code> should be 20% + 40/2 = <strong>40%</strong> and <code>child2</code> should be 40% + 40/2 = <strong>60%</strong>.</p>
  <p>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?</p>
  <p><a href="https://i.stack.imgur.com/emho5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/emho5.png" alt="enter image description here" /></a></p>