<!-- 
    Resize window to see wrapping behavior
    Context: <https://thenewobjective.com/web-development/css-grid-with-detail-view>
-->

<div class="container">
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">1</span>
      <span class="block">1. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">2</span>
      <span class="block">2. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">3</span>
      <span class="block">3. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">4</span>
      <span class="block">4. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">5</span>
      <span class="block">5. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">6</span>
      <span class="block">6. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">7</span>
      <span class="block">7. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">8</span>
      <span class="block">8. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">9</span>
      <span class="block">9. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">10</span>
      <span class="block">10. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">11</span>
      <span class="block">11. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">12</span>
      <span class="block">12. Lipsum Lipsum</span>
  </label>
  <label class="item">
      <input type="radio" name="rdo-visible">
      <span class="box">13</span>
      <span class="block">13. Lipsum Lipsum</span>
  </label>
</div>

.container {
  position: relative;
  outline: 1px solid green;
  width: 60%;
  margin:auto;
  font: 16pt sans-serif;
}
.item {
  position: static;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  width: 50px;
  overflow: visible;
}
[name=rdo-visible] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
[name=rdo-visible]:checked ~ .box {
  margin-bottom: 2em;
}
[name=rdo-visible]:checked ~ .block {
  display: block;
  margin-top: -1.6em;
}
.box {
  display: block;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  line-height: 50px;
  text-align: center;
}
.block {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2em;
  line-height: 2em;
  background-color: blue;
  color: white;
}