Flexbox Table Colspan Rowspan

by web-nfo.com

HTML

<div class="wrapper">
  <div class="year">
    2024
     <div class="yearTotal">yearTotal2024</div>

    <div class="yearSubTotals">
      <div class="yearSubTotal">yearSubTotal1</div>

      <div class="contraAccounts">
        <div class="contraAccount">
          <div class="contraAccountTitle">contraAccount1</div>
          <div class="contraAccountDetails">
            <div class="name">name1</div>
            <div class="transactions">
              <div class="price">price1</div>
              <div class="date">date1</div>
              <div class="description">description1</div>
              <div class="account">account1</div>
            </div>
          </div>
        </div>

        <div class="contraAccount">
          contraAccount2
          <div class="name">name2</div>
          <div class="transactions">
            <div class="price">price2</div>
            <div class="date">date2</div>
            <div class="description">description2</div>
            <div class="account">account2</div>
          </div>
        </div>
      </div>


    </div>
  </div>
 
  <div class="year">
    20234
    <div class="yearTotal">
    yearTotal2023
    </div>
  </div>
  
</div>

SCSS

.wrapper {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

/* .wrapper > div {
  flex: 0 0 25%;
  height: 100px;
  display: flex;
  flex-flow: row wrap;
} */

.wrapper > div {
  flex: auto;
}

.year {
  background: grey;
  display: flex;
}
.yearTotal {
  background: red;
}
.yearSubTotals {
  display: flex;
}
.yearSubTotal {
  background: green;
}
.contraAccounts {
  display: flex;
  flex-direction: column;
}
.contraAccount {
  background: yellow;
  display: flex;
}
.contraAccountTitle {
  font-weight: bold;
}
.name {
  background: orange;
}
.price {
  background: red;
}
.date {
  background: purple;
}
.description {
  background: cyan;
}
.account {
  background: blue;
}

.year > div,
.group4 > div {
  flex: 0 0 50%;
}

* { box-sizing: border-box; margin: 0; }