Elena Fire

<ul>
     <li class="punkt-so-strelkoi">
           <label for="punkt-1" class="down-accord">Click here</label>
           <input type="ckeckbox" id="punkt-1">
           <div class="inner-accord">It's a trick to get your attention! Ho-ho-ho!</div>
     </li>
     <li class="punkt-so-strelkoi">
           <label for="punkt-2" class="down-accord">And here too</label>
           <input type="ckeckbox" id="punkt-2">
           <div class="inner-accord">It's a trick to get your attention! Ho-ho-ho!</div>
     </li>
</ul>

.down-accord {
    text-decoration: none;
    cursor: pointer;
}

li {
   position: relative;
}

#punkt-1, #punkt-2 {
   position: absolute;
   left: -9999px;
}

#punkt-1:checked+.inner-accord,
#punkt-2:checked+.inner-accord {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    top: 100%;
    left: 0;
}
input[type="checkbox"] {
    position: fixed;
}

li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}