How to align boxes right under each other with flexbox

Question

The point is that I want to implement this layout with html, css and js. When you click on the button, the container should alternately become taller/smaller.

picture 1 picture 2

• However, no fixed height should be passed, as is currently implemented. Without using max-height, scaleY.
• Also, text5 should be right under text2 and text6 right under text3 (as you can see in the picture) without using width or something similar. The flex items should only be as large as the content.

I've also searched for solutions, but the search results weren't what I was looking for.

How can I transition height: 0; to height: auto; using CSS?

Flexbox not giving equal width to elements

Align divs under each other

let isOpen = false;

function toggleHeight() {
    let row2 = document.getElementById('row2');
  if(!isOpen){
    isOpen= !isOpen;
    row2.style.height = '120px';
    //row2.style.height = 'auto';
  }
  else{
    isOpen= !isOpen;
    row2.style.height = '0';
  }

}

.row1, .row2 {
  display: flex;
  gap: 10px;
  background-color: #ccc;
}

.row2 {
  height: 0;
  transition: 0.25s ease;
  overflow: hidden;
}

.col1 {
  display:flex;
}

<div onclick="toggleHeight()">Click Me</div>

<div class="row1">
  <div class="col1">
      <div>
        <div>text</div>
        <div>text</div>       
      </div>
      <div>
        <div>text</div>
        <div>text</div>       
      </div>
       <div>
        <div>text</div>
        <div>text</div>       
      </div>
  </div>
    <div class="col2">
      <div>text2</div>
      <div>text2</div>
  </div>
    <div class="col2">
      <div>text3</div>
      <div>text3</div>
  </div>
</div>

<div id="row2" class="row2">
  <div class="col1">
      <div>text4</div>
      <div>text4</div>
  </div>
    <div class="col2">
      <div>text5</div>
      <div>text5</div>
  </div>
    <div class="col2">
      <div>text6</div>
      <div>text6</div>
  </div>
</div>

Answer 1

I created exactly you wanted but the transition on height is not working!

const button = document.querySelector('button')
const row2 = document.querySelector('#row-2')

button.addEventListener('click', () => {
  row2.classList.toggle('visible')
})

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

button {
  padding: 4px;
  border: 1px solid #c1c1c1;
}

.flex {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}

.flex .row {
  display: inherit;
  column-gap: 16px;
}

.flex .row .col {
  display: inherit;
  padding-inline: 16px;
  flex-direction: column;
}

.flex .row#row-2 {
  height: 0px;
  overflow: hidden;
  background-color: red;
  transition: height 250ms ease, overflow 250ms ease;
}

.flex .row#row-2.visible {
  height: auto;
  overflow: visible;
}

<div>
  <button>Click Me!</button>

  <div class="flex">
    <div class="row" id="row-1">
      <div class="col">
        <span>texttexttext</span>
        <span>texttexttext</span>
      </div>
      <div class="col">
        <span>text2</span>
        <span>text2</span>
      </div>
      <div class="col">
        <span>text3</span>
        <span>text3</span>
      </div>
    </div>

    <div class="row" id="row-2">
      <div class="col" style="align-self: center;">texttexttext</div>
      <div class="col">
        <span>text5</span>
        <span>text5</span>
      </div>
      <div class="col">
        <span>text6</span>
        <span>text6</span>
      </div>
    </div>


  </div>
</div>

P.S - remove padding-inline from .col.