When one HTML element changes, how do I keep the other elements in the same position?

Question

I'm working on a flash card app. My goal is to make each flashcard expandible and collapsible. My challenge is that when one card is opened, the position of the other cards change and I'd like to keep them in the same position but just have the expanded card on top. I even tried to change the container display in my function. I can't figure out what I'm doing wrong. If anyone can help, I'd appreciate it!

UPDATED SCREENSHOTS FOR CLARITY*

This is what the app looks like to start

and here's what Im trying to mimic

what my version looks like to start

what happens when I expand a card

In my code, the remaining cards shift position when I expand a card, I just want the expanded card to change in size without moving the other cards.

Here's my CSS:

    .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    align-items: center;
    justify-content: center;
    position: relative;
}

.flashcard {
    background-color: white;
    width: 350px;
    height: fit-content;
    border: solid 1px #707070;
    margin: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 1rem;

}

Here's my HMTL:

<div class="container" id="container">
        <div class="flashcard" id="flashcard">
            <img src="/Screenshot 2022-04-08 181503.png" />
            <h1 class="title">Lorem Ipsum Sit Dolor</h1>
            <p class="text-1">
                Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Ut scelerisque nunc sed leo
                aliquam interdum. Duis quis commodo felis.
                Phasellus eleifend scelerisque dui, et gravida
                ante viverra ullamcorper. Maecenas et nisl
                eget tortor consequat aliquam.
            </p>
            <p class="text_hidden" id="text_hidden">
                Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Ut scelerisque nunc sed leo
                aliquam interdum. Duis quis commodo felis.
                Phasellus eleifend scelerisque dui, et gravida
                ante viverra ullamcorper. Maecenas et nisl
                eget tortor consequat aliquam.
            </p>
            <p class="text_hidden" id="text_hidden1">
                Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Ut scelerisque nunc sed leo
                aliquam interdum. Duis quis commodo felis.
                Phasellus eleifend scelerisque dui, et gravida
                ante viverra ullamcorper. Maecenas et nisl
                eget tortor consequat aliquam.
            </p>
            <button class="expand" id="expand" onclick="unhideText();expandCard();showCollapse()">Expand<i class="fa-solid fa-plus"></i></button>
            <button class="collapse" id="collapse" onclick="hideText()">Collapse<i class="fa-solid fa-minus"></i></i></button>
        </div>

And here's my JS:

expandCard = () => {
    let flashcardStyle = document.getElementById('flashcard').style

    flashcardStyle.height = "fit-content"
    flashcardStyle.position = "absolute"
    flashcardStyle.top = "0"
    flashcardStyle.left = "0"
}

showCollapse = () => {
  document.getElementById("collapse").style.display = "block";
  document.getElementById("expand").style.display = "none";
};

hideText = () => {
  let collection = document.getElementsByClassName("text_hidden");
  for (let i = 0; i < collection.length; i++) {
    collection[i].style.display = "none";
  }
  let collection2 = document.getElementsByClassName("flashcard");
  console.log(collection);
  for (let i = 0; i < collection2.length; i++) {
      let card = collection2[i].style
        card.height = "fit-content";
        card.top = "0";
        card.bottom = "0";
        card.left = "0";
        card.right = "0";
    

  }
  document.getElementById("collapse").style.display = "none";
  document.getElementById("expand").style.display = "block";
};