JSFiddle - React, Tailwind, and code Playground

by Nevear

HTML

<label>
  <input type="checkbox">

  <div id="sample">Брэд Райт (исполнительный продюсер «Звёздные врата») в своем аудиоподкасте для The Companion заявил, что недавно закончил писать диалог для персонажа Звездных Врат — Дэниела Джексона( актер Майкл Шэнкс).

Хотя Райт и объявил, что в будущем возможном проекте по Звездным вратам будет Дэниел Джексон, это вовсе не означает, что персонаж получит в сериале постоянное место. Скорее всего Джексон будет появляться в редких эпизодах или вообще получит обычное камео. Но давайте будем честны: мы будем рады и этому.</div>
  <div  id="red"> ОТКРЫТЬ</div>
</label>

CSS

label {
 display: flex;
flex-direction:column;
  
}

label input {
  display: none;
}


input:checked ~ #sample {
    height:fit-content;
     display:flex;
}

input:checked ~ #red {
     background: red;
}

#sample {
  width: 100px;
  height: 100px;
  background: #000000;
  overflow:hidden;
  color:white;
  display:none;
}

#red {
  
  margin-top:-10px;
  background: #fff;
  opacity:0.7;
}