Подскажите, как грамотно сверстать вот такое дерево в 2 колонки:



Такое используется в Firebug (плагин для Firefox), когда просматриваешь DOM.
Основная сложность заключается в позиционировании второй колонки! Она должна целиком отодвигаться от первой колонки, если первая расширяется.
Нужно в тегах сделать вложенность, чтобы соответствовала вложенности узлов дерева.
Смотрел, как устроен Firebug Lite, там открывающиеся узлы расположены под высшим узлом, а не внутри его. Т.е. это не то!

Помогите, как это сверстать грамотно, желательно без яваскрипта!
Вот моя реализация. Но это еще сырое и не полноценное.

однозначно в таблицу всё загоняешь и всё