<details class="details">
  <summary class="details__title">Question 1</summary>
  <div class="details__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
  </div>
</details>
<details class="details">
  <summary class="details__title">Question 2</summary>
  <div class="details__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
  </div>
</details>
<details class="details">
  <summary class="details__title">Question 3</summary>
  <div class="details__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
  </div>
</details>
<details class="details">
  <summary class="details__title">Question 4</summary>
  <div class="details__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
  </div>
</details>

body {
  background: #425995;
  padding-top: 50px;
}

.details {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 5px;
  transition: 0.3s;
  overflow: hidden;
}

.details::after {
  position: absolute;
  right: 24px;
  top: 15px;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 3px solid #425995;
  border-bottom: 3px solid #425995;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: .3s;
}

.details[open]::after {
  transform: rotate(45deg);
}

.details[open] {
  padding-bottom: 100px;
}

.details[open] .details__title {
  margin-bottom: 32px;
}

.details__title {
  background: #fff;
  border-radius: 5px;
  padding: 12px 24px;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  transition: .3s;
}

.details__title::-webkit-details-marker {
  display: none;
}

.details__content {
  padding: 0 32px;
  font-size: 18px;
  margin-bottom: -60px;
}

.details__content p:last-child {
  margin-bottom: 0;
}
.details__content p:first-child {
  margin-top: 0;
}