如何在html/css中创建带分隔叶的水平树

我有一个标准的复合结构，我需要把它转换成HTML。我已经在互联网上搜索了水平CSS树，但我不知道如何将叶子和保持行状顺序的节点分开

下面是我对示例结构的目标设计：rootnodeleaf1、leaf2、leaf3 如图所示，根节点有两个子节点，但其高度由所有三片叶子组成

重要的是要注重叶片的均匀排列

如有任何建议，将不胜感激

---

如果您正在使用引导到您的项目中，我建议您使用