Align inner div items between different divs

Question

I would like to align items which belongs together but which are in different div containers. I am not sure if this it possible but my problem is that I can´t change the structure of the html template I have.

My current state is the top part of this image. And the result I am trying to achieve is the bottom part. The left items without border are my row headers. I want to align the items that belongs together so that I have a row for each main item (G1, G2) as you can see in the bottom part where I added the margin in css. So the result should be two swimlanes. My problem is that that the amount of items in the cells are loaded dynamically and can change by time.

The main problem is that I can´t change much on the html template so that I have to use the cell structure. Is this possible to relaize with dynamic amount of items?

I am using this in an Angular App. So it should be possible to use any Javascript.

I have created this codepen as an example. Codepen Example or Angular Stackblitz

html

<div class="outer">
  <div class="groups">
    <div class="groupItem">> G1</div>     
    <div class="groupItem">> G2</div> 
 </div>
<div class="container">
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group1">G1</div>         
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group1">G1</div>
    <div class="group1">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group2">G2</div>       
  </div>
  <div class="cell">
    <div class="group1">G1</div>  
    <div class="group2">G2</div>      
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group2">G2</div>       
  </div>
</div>

Css

.outer {
  display: flex;
}

.groups {
  padding-top: 20px;
  margin-right: 1px;
}

.container {
  display: flex;
}

.cell {
  padding: 20px;
  border: 1px solid #000;
}

Answer 1

Here is a solution. The gist is basically to find the maximum number of group1 elements any cell may have. Then you adjust the padding top of the first group2 element according to the max minus the number of group1 elements in each cell. Please see the code snippet below.

const cells = document.getElementsByClassName("cell")

// Find the max number of group1 elements
let maxGroup1 = 0
for (let cell of cells) {
    const group1 = cell.getElementsByClassName("group1")
  maxGroup1 = Math.max(maxGroup1, group1.length)
}

// For each cell, adjust group2 padding top accordingly 
for (let cell of cells) {
    const group1Length = cell.getElementsByClassName("group1").length
  const group2PaddingTop = (maxGroup1 - group1Length) * 20
  const group2 = cell.getElementsByClassName("group2")
  if (group2.length > 0) {
    group2[0].style.paddingTop = group2PaddingTop + "px"
  }
}

// Adjust the groups label
const labels = document.getElementsByClassName("groupItem")
const groupLabelPaddingTop = (maxGroup1 - 1) * 20
labels[1].style.paddingTop = groupLabelPaddingTop + "px"

.outer {
  display: flex;
}

.groups {
  padding-top: 20px;
  margin-right: 1px;
}

.container {
  display: flex;
}

.cell {
  padding: 20px;
  border: 1px solid #000;
}

.cell div, .groups div {
  height: 20px;
}

<div class="outer">
  <div class="groups">
    <div class="groupItem">> G1</div>     
    <div class="groupItem">> G2</div> 
 </div>
<div class="container">
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group1">G1</div>         
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div> 
    <div class="group2">G2</div>       
  </div>
  <div class="cell">
    <div class="group1">G1</div>  
    <div class="group2">G2</div>      
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group1">G1</div>
    <div class="group2">G2</div>        
  </div>
  <div class="cell">
    <div class="group2">G2</div>       
  </div>
</div>

Answer 2

You can simply use an empty divlike this :

HTML

<div class="cell">
  <div class="group1">G1</div> 
  <div class="groupx"></div> 
  <div class="group2">G2</div>       
</div>

CSS

.groupx {
  display: block;
  width: 10px;
  height: 20px;
}