跨嵌套子div复制表列结构

Question

因此，我正在处理一段代码，该代码基于数据结构自动生成嵌套的复选框结构。

下面，我简化了嵌套div结构的外观：

<div class="tree">
    <div class="item level1">
        <div class="content">
        </div>
        <div class="children>
            <div class="item level2">
                <div class="content">
                </div>
                <div class="children>
                    <div class="item level3">
                        <div class="content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

因此，我想向这些level3节点添加数据，但是我希望这些数据以表格形式格式化。

这是一张基本图纸：

注意：线条的绘制只是为了方便查看格式，而不必在实际视图中显示。

我希望所有值1的值都像列那样排列，以使每个“单元格”具有列中最长div的长度，以便它们易于格式化，并且用户可以向下浏览列表。

在content节点的level3 div中保存这些数据片段并正确格式化它们的最佳方法是什么？我曾想过要尝试通过某个类计算每个div的适当宽度，然后使用JavaScript手动设置宽度，但是我不确定如何获取该“适当”宽度，以便可以调整所有{{ 1}}。这也很重要，因为我们可以更改值。因此，如果一个值发生变化，我将不得不重新计算宽度。

谢谢！