Nested tables

by kairavthakar2016

HTML

<div class="container">
<ul>
   <li>
      <div>Row 1, Column 11111111 vsasafas  faf af</div>
      <div>Row 1, Column 2</div>
      <div>Row 1, Column 3</div>
      <ul>
         <li>
            <div>Row 2, Column 1</div>
            <div>Row 2, Column 2</div>
            <div>Row 2, Column 3</div>
         </li>
      </ul>
   </li>
   <li>
      <div>Row 3, Column 1</div>
      <div>Row 3, Column 2</div>
      <div>Row 3, Column 3</div>
      <ul>
         <li>
            <div>Row 4, Column 1</div>
            <div>Row 4, Column 2</div>
            <div>Row 4, Column 3</div>
         </li>
      </ul>
   </li>
   <li>
      <div>Row 5, Column 1</div>
      <div>Row 5, Column 2</div>
      <div>Row 5, Column 3</div>
      <ul>
         <li>
            <div>Row 6, Column 1</div>
            <div>Row 6, Column 2</div>
            <div>Row 6, Column 3</div>
         </li>
      </ul>
   </li>
</ul>
</div>

CSS

.container {
  width:600px;
}
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;
    flex: 1;
    align-items: center;
}