JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
      <h1 class="no">faq</h1>
      <section>
        <p class="question">How many team members can i invite?</p>
        <img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
          You can invite up to 2 additional users on the Free plan. There is no
          limit on team members for the Premium plan.
        </p>
      </section>
      <section>
        <p class="question">What is the maximum file upload size?</p>
        <img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
          No more than 2GB. All files in your account must fit your allotted
          storage space.
        </p>
      </section>
      <section>
        <p class="question">How do I reset my password?</p>
        <img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
          Click “Forgot password” from the login page or “Change password” from
          your profile page. A reset link will be emailed to you.
        </p>
      </section>
      <section>
        <p class="question">Can I cancel my subscription?</p>
        <img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
          Yes! Send us a message and we’ll process your request no questions
          asked.
        </p>
      </section>
      <section>
        <p class="question">Do you provide additional support?</p>
        <img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
        <p class="answer">
          Chat and email support is available 24/7. Phone lines are open during
          normal business hours.
        </p>
      </section>
    </div>

CSS

.card {
  width: 20.4375rem;
  background-color: #ffffff;
  border-radius: 1.4375rem;
  margin: auto;
  padding: 132px 24px 48px;
  text-align: center;
  transform: translateY(-125px);
}

section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8ea;
  flex-wrap: wrap;
}

p {
  color: var(--main-text-color);
  font-size: 0.75rem;
}

.answer {
  flex-basis: 100%;
  text-align: left;
  display: none;
}

JavaScript

const questions = document.querySelectorAll("section");
const answers = document.querySelectorAll(".answer");

let currentlyOpen;

function toggle() {
	if (currentlyOpen) {
  	// Something currently open
    currentlyOpen.lastElementChild.style.display = "none" // Close it
  }
  
  if (currentlyOpen === this) {
  	// Element is already open
    currentlyOpen.lastElementChild.style.display = "none" // Hide it
    currentlyOpen = undefined; // Delete it's refrence
    return // And return
  }
  
  // Show clicked element
  this.lastElementChild.style.display = "block"
  
  // Store it for later
  currentlyOpen = this
}


questions.forEach((question) => question.addEventListener("click", toggle));