SVG in accordion not staying in line when active-CodePudding

I recently tried to create an HTML and CSS only accordion with an SVG added to it, it works for the most part but my problem arises when i activate the checkbox, the svg, which i set to rotateY(180deg), then moves down, out of the label and into the content, which i do not want, i would prefer it to stay in place with the label and rotate in it as well, so if anyone has an idea how to help me, please do.

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  position: relative;
  display: block;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  position: absolute;
  right: 5px;
  top: 50%;
  bottom: 0%;
  transform: translateY(-50%);
  transition: 0.5s;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  transform: rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

<div >
  <div>
    <input type="checkbox" name="author-contact" id="1"  />
    <label for="1" >How can i contact the author
      <svg width="100" height="50">
     <polygon points="90,20 100,30 80,30"/>
   </svg>
      </label>
    <p >
      Donec dapibus risus tincidunt eros congue feugiat. Etiam pharetra sit amet ex vestibulum mattis. Aliquam erat volutpat. Fusce mattis, nibh at auctor malesuada, lacus dolor sodales nibh, et porttitor dui purus a ipsum. Aliquam venenatis mollis pretium.
      Etiam quis commodo lectus. Donec ac augue sit amet nisl aliquet dictum ut vel nunc. Nulla porta condimentum dolor, ut hendrerit turpis viverra sit amet. Fusce vel est quam. Quisque porttitor facilisis risus in lacinia. Proin laoreet mi ac libero
      venenatis, sed ornare eros vehicula.
    </p>
  </div>
</div>

The results of this Youtube video was what i attempted to recreated

CodePudding user response：

The layout: if the label is display flex all the child elements will align horizontally as default. The space between the text and the SVG is made with justify-content.

The SVG: It is easier to handle the SVG if the content fills out the viewbox. I defined a viewBox and adjusted the polygon so that the two matches. The height of the SVG is defined in CSS.

:root {
  --green: green;
}

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  display: flex;
  justify-content: space-between;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  height: 1em;
  transition: 0.5s;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  transform: rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

<div >
  <div>
    <input type="checkbox" name="author-contact" id="1"  />
    <label for="1" >How can i contact the author
      <svg viewBox="0 0 20 10">
        <polygon points="10,0 0,10 20,10"/>
      </svg>
    </label>
    <p >
      Donec dapibus risus tincidunt eros congue feugiat. Etiam pharetra sit amet ex vestibulum mattis. Aliquam erat volutpat. Fusce mattis, nibh at auctor malesuada, lacus dolor sodales nibh, et porttitor dui purus a ipsum. Aliquam venenatis mollis pretium.
      Etiam quis commodo lectus. Donec ac augue sit amet nisl aliquet dictum ut vel nunc. Nulla porta condimentum dolor, ut hendrerit turpis viverra sit amet. Fusce vel est quam. Quisque porttitor facilisis risus in lacinia. Proin laoreet mi ac libero
      venenatis, sed ornare eros vehicula.
    </p>
  </div>
</div>