How to have items in a flex container allow their nested children to appear below it onClick?

Issue

I have a flex container with flex direction row and a series of items in it that renders to the screen like the below image:

After clicking on one of these items, I need a series of items to appear below it. For example, after clicking on 'Top Level Item 1' the below items should appear like in this image below:

While I know it's possible to place two containers (one that contains all the top levels items and another that contains all the bottom level items) on top of each other and simply update the bottom one onClick, this causes alignment issues when more items are added or non-items are added to the top level.

Instead, I'm trying to find a way to have the bottom level items nested within its associated top level item. This approach works, but obviously it will push the border down like in the image below:

How can I achieve the layout of Image 2 onClick, but still have the individual bottom level item divs nested within its associated top level item div?

For example, in a way similar to:

               <div>
                    <div>Top Level Item 1</div>
                    <div>
                        <div>bottom Level Item 1</div>
                        <div>bottom Level Item 2</div>
                    </div>
                </div>

Position: absolute on the dropdown items will not work if there is a height in place on the bordered nav and the items are centered within in. So I am trying to find a way to account for that use case as well. For example, this is what occurs if you place a height on the container and position: absolute on the dropdown items.

Thank you for any insight!

Solution

Using position:absolute is indeed the solution (I started working on it and saw a comment that was a bit quicker).

I still wanted to do the challenge, let me know if this is the result you desire.

document.querySelectorAll('.level').forEach(el => {
  el.addEventListener('click', (ev) => {
    const toggleNode = [...el.childNodes].filter(child => child.classList && child.classList.contains('secondary'));
    
    if (toggleNode.length) {
        toggleNode[0].classList[toggleNode[0].classList.contains('hidden') ? 'remove' : 'add']('hidden');
    } 
  })
})

.flex {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid black;
  height: 130px;
}

.level {
  flex-basis: 33%;
  flex-grow: 1;
}

.secondary {
  position: absolute;
  top: 130px;
}

.hidden {
  display: none;
}

<div class="flex">
  <div class="level">
    <div>Top Level Item 1</div>
    <div class="secondary hidden">
      <div>bottom Level Item 1</div>
      <div>bottom Level Item 2</div>
    </div>
  </div>
  <div class="level">
      <div>Top Level Item 2</div>
      <div class="secondary hidden">
        <div>bottom Level Item 1</div>
        <div>bottom Level Item 2</div>
    </div>
  </div>
  <div class="level">
      <div>Top Level Item 3</div>
      <div class="secondary hidden">
        <div>bottom Level Item 1</div>
        <div>bottom Level Item 2</div>
    </div>
  </div>
</div>

Answered By - Cristian-Florin Calina