Line break in CSS dropdown menu is not correct

Site URL: https://scarlet-beagle-me6l.squarespace.com

Hi all, 

I am trying to code a dropdown menu on my site. The line break looks correct on full desktop screen, but moves to a strange place on smaller screens/mobile. 

Has anyone an idea, how I could fix this? 

This is the code I am using: 

Code for Text block (further below the custom css code): 

<div class="dropdown">
  <p2>This is question 1</p2>
  <div class="answer">
    <p>This is answer 1</p>
  </div>
</div>

<div class="dropdown">
  <p2>This is question 2</p2>
  <div class="answer">
    <p>This is answer 2</p>
  </div>
</div>

<div class="dropdown">
  <p2>This is question 3</p2>
  <div class="answer">
    <p>This is answer 3</p>
  </div>
</div>

This is the Custom CSS code: 

/* Dropdown Box */
.dropdown {
  margin-bottom: 4vw; /*spacing between boxes */
}
.dropdown p2 {
  font-size: 1.1rem; /*question font size */
  font-weight: 600; /* question bold */
  background: #FFFFFF; /*box background colour */

  color: #00000 !important; /*question text colour*/
  padding: 8px;
  margin: auto 0px;
  cursor: pointer;
}

.dropdown p {
  font-style: normal; /* answer normal */
}

.answer {
  display: none;
  margin-top: 1vw; /*space between question and answer */
}

.dropdown p2:after {
  content: "\>"; /* arrow */
  font-size: 24; /*font size arrow */
  text-align: left;
  float: left;
}

Thanks a lot. 

Hi,

What is access password? We can check problem easier

---

You can also use Accordions Tab Plugin 

or use this free tool to add FAQ Accordion Dropdown.