Nested tables

by kairavthakar2016

HTML

<div class="container">
<ul>
   <li>
      <div>R1C1</div>
      <div>Row 1, Column 2 plus much more content, sometimes this muchasfafafAFA</div>
      <div>Row 1, Column 3</div>
      <ul>
         <li>
            <div>R2C2</div>
            <div>Row 2, Column 2 plus much more content, sometimes this much</div>
            <div>Row 2, Column 3</div>
         </li>
      </ul>
   </li>
   <li>
      <div>R3C3</div>
      <div>Row 3, Column 2 plus much more content, sometimes this much</div>
      <div>Row 3, Column 3</div>
      <ul>
         <li>
            <div>R4C4</div>
            <div>Row 4, Column 2 plus much more content, sometimes this much</div>
            <div>Row 4, Column 3</div>
         </li>
      </ul>
   </li>
   <li>
      <div>R5C5</div>
      <div>Row 5, Column 2 plus much more content, sometimes this much</div>
      <div>Row 5, Column 3</div>
      <ul>
         <li>
            <div>R6C6</div>
            <div>Row 6, Column 2 plus much more content, sometimes this much</div>
            <div>Row 6, Column 3</div>
         </li>
      </ul>
   </li>
</ul>
</div>

CSS

.container {
  width:800px;
}
ul {
    display: block;
    width: 100%;
}

ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

ul > li > ul {
    display: flex;
    width: 100%;
    padding-left: 0;
}
ul > li > div {
    padding-left: 20px;
    align-items: center;
    flex: 1;
}