CSS3扩展行项高度而不影响整行高度

Question

我得到了 ul 多个 li ，我需要的是每个 li 符合视口宽度的50％，浮动在右侧和动态高度，因为可以展开和折叠，但不影响整行。

这是正常情况：

这是扩展项目的外观：

我尝试了很多方法但没有成功。对我来说重要的是不要使用javascript，只需要CSS。

Answer 1

点击此链接：codepen.io

<div class="collapse">

  <input id="big-text-collapse" type="checkbox">
  <label for="big-text-collapse" onclick>Big text</label>

  <div class="collapse__content">
    <strong>I'm always collapsible</strong>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lectus mi, vel consectetur massa vulputate in. Donec vestibulum, dui non facilisis congue, ex nisi bibendum urna, in lacinia enim dolor sed risus. Nunc tristique malesuada mauris, at
      accumsan velit aliquam vitae. Sed ultricies risus sit amet velit consequat lacinia. Sed non ornare erat. Suspendisse convallis velit dapibus orci sollicitudin malesuada.
    </p>
  </div>