Как сделать так, чтобы параметры формы появлялись в левой части ярлыка переключателя

Question

Я написал следующее:

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked~.reveal-if-active,
input[type="checkbox"]:checked~.reveal-if-active {
  opacity: 1;
  max-height: 100px;
  /* little bit of a magic number :( */
  overflow: visible;
}

<div>
  <input type="radio" name="choice-animals" id="choice-animals-dogs">
  <label for="choice-animals-dogs">I like dogs more</label>
  <div class="reveal-if-active">
    <input type="text" name="dog" placeholder="why?">
  </div>
</div>
<div>
  <input type="radio" name="choice-animals" id="choice-animals-cats">
  <label for="choice-animals-cats">I like cats more</label>
  <div class="reveal-if-active">
    <input type="text" name="cat" placeholder="why?">
  </div>
</div>

И вывод этого кода:

Итак, как мне go о создать код, с помощью которого я могу сделать текстовые поля, которые отображаются, нажав на переключатели слева от ярлыков этих переключателей?

Я пытался использовать таблицы для фактического размещения переключателей, а затем попытался отобразить скрытые текстовые поля в следующей ячейке рядом с меткой, но это не помогло, поскольку использование таблицы каким-то образом отключает всплывающие окна.

Любая помощь по этому вопросу будет очень признателен!

Answer 1

Как уже упоминалось в комментарии @ FabioCalderan, и благодаря ему мы можем просто добавить display: inline-block в класс .reveal-if-active , чтобы отобразить параметры в та же строка, что и у переключателя и надписи.

.reveal-if-active {
  display: inline-block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked~.reveal-if-active,
input[type="checkbox"]:checked~.reveal-if-active {
  display: inline-block;
  opacity: 1;
  max-height: 100px;
  /* little bit of a magic number :( */
  overflow: visible;
}

<div>
  <input type="radio" name="choice-animals" id="choice-animals-dogs">
  <label for="choice-animals-dogs">I like dogs more</label>
  <div class="reveal-if-active">
    <input type="text" name="dog" placeholder="why?">
  </div>
</div>
<div>
  <input type="radio" name="choice-animals" id="choice-animals-cats">
  <label for="choice-animals-cats">I like cats more</label>
  <div class="reveal-if-active">
    <input type="text" name="cat" placeholder="why?">
  </div>
</div>