The Riddle of the Blocks

Imagine you got this:

<x>
  <x1 />
  <x2 />
</x>
<y />

which looks like that:

Now, without changing the markup, how do you make it look like this:

That's not a rhetorical question, I really need to know.
I currently think it is not solvable with the layouts we are given in CSS (barring absolute positioning). All modes assume an element to be a rectangle, block, box, whatever you may call it. There would need to be a mode, which I'll call display: tetris.

Are there any layout systems out there which implement something like what I am looking for?