Pure CSS (no jQuery), hide one div, show another?

Question

I want to do something like this, but i want the Collapse 2 to stay right under Collapse 1 when I show Content 1. Is that possible? I tried to arrange the code differently, but it just went crazy. :D

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}

.collapse + input{
  display: none; /* hide the checkboxes */
}

.collapse + input + div{
  display:none;
}

.collapse + input:checked + div{
  display:block;
}

<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>

Answer 1

A little bit tricky but its work!

section {
  position: relative;
}

section > .content {
  position: absolute;
  top:100%;
  left: 0;
}

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}

<section>
  <label class="collapse" for="_1">Collapse 1</label>
  <input id="_1" type="radio" name="c1"> 
  <div class="content">Content 1</div>

  <label class="collapse" for="_2">Collapse 2</label>
  <input id="_2" type="radio" name="c1">
  <div class="content">Content 2</div>
</section>

Fiddle demo