Как установить html элементам одинаковую относительную высоту?

Получается так jsfiddle.net/atpqt1jb/2 ? Так не работает. Я пробовал делать с table-(row|cell), и с ними можно добиться нужного эффекта, но у .a1 и .a2 получаются разные родители (они будут в отдельных "строках" table-row) jsfiddle.net/h0wmu7g8 . Мне важно, чтобы у .a1 и .a2 (зеленый и красный блок на примере) был один общий родитель (тут на примере это тег li).