JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="horizontal-click">
  <input type="radio" name="vkl" id="vkl1"/>
    <label for="vkl1"><span>1</span>Where I can find information, where I can find information?</label>
  <div>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</div>
  <input type="radio" name="vkl" id="vkl2"/>
  <label for="vkl2"><span>2</span>Where I can find information, where I can find information?</label>
  <div>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</div>
  <input type="radio" name="vkl" id="vkl3"/>
  <label for="vkl3"><span>3</span>Where I can find information, where I can find information?</label>
  <div>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</div>
  <input type="radio" name="vkl" id="vkl4"/>
  <label for="vkl4"><span>4</span>Where I can find information, where I can find information?</label>
  <div>Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды. Монополисты крепко взяли в свои руки рынок взаимного Банки берут денежные средства у населения под мизерные проценты, а выдают их конечному потребителю под большие ссуды.</div>
  <input type="radio" name="vkl" id="vkl5"/>
  <label for="vkl5"><span>5</span>Where I can find information, where I can find information?</label>
  <div>Банки берут...

CSS

.horizontal-click [name="vkl"] { display: none; }
.horizontal-click > :not(input):not(label) {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0 .5em;
  border: 1px solid #808080;
  border-top-style: none;
  transition: .5s;
}
.horizontal-click > label {
  overflow: hidden;
  display: block;
  padding: .5em 1em;
  background: #606060;
  color: rgb(200,200,200);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.horizontal-click > :checked + label + * {
  overflow: auto;
  height: 310px;
}
.horizontal-click > :checked + label {
  background: #454545;
  cursor: default;
}