我有一个类似于下面的HTML结构：

<ul>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
</ul>

我使用以下CSS将其格式化为表格：

ul {
    display: table;
    width:100%;
}
li {
    display: table-row;
}
li div {
    display: table-cell;
}

但是，我需要所有行（父项和子项）都对齐到左手，一个在另一个的下面，没有'巢状'或'缩排'版面配置。这在目前的HTML中可能吗？（注意，我无法更改HTML结构）使用“表格”布局的原因是所有列的间距都很好。我可能会使用Flex，但是某些列的文本比其他列多得多，因此表格式似乎效果最好。
任何帮助都是感激不尽的！
https://jsfiddle.net/randkb/os7eq493/3/
我希望的结果是这样的：

而不是：