Buttons working with checkboxes. Can't make them stick to each other in column

I have a problem with doing a nice menu based on photos, with hidden content behind them.

The RED and GREEN containers are buttons working with checkboxes. I want this code to work like this:

The content behind the button is a text referring to a button (photo), which will be shown to the user only after pressing it. I wish my fly-out would push the rest of the page down.

At the moment, this is what is happening, but unfortunately the second GREEN button does not return to its position touching the RED one, but hides underneath it. It protrudes as much as the content from under the RED is high.

* {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-size: 16px;
  box-sizing: border-box;
}

.container {
  width: 500px;
  margin: 0 auto;
  background-color: grey;
}

#firstButtonCheck {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}

#firstButtonCheck~.firstContent {
  margin-top: -100%;
  width: 500px;
  display: block;
  transition: margin-top 1s ease-out, max-height 1s ease-out;
  margin-left: auto;
  margin-right: auto;
}

.firstButton {
  display: block;
  height: 400px;
  width: 100%;
  background-color: red;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

#firstButtonCheck:checked~.firstContent {
  margin-top: 0px;
  transition: margin-top 1s ease-out, max-height 1s ease-out;
}

#secondButtonCheck {
  position: absolute;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
}

#secondButtonCheck~.secondContent {
  margin-top: -100%;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  display: block;
  transition: margin-top 1s ease-out, max-height 1s ease-out;
}

.secondButton {
  display: block;
  width: 500px;
  height: 500px;
  background-color: green;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#secondButtonCheck:checked~.secondContent {
  margin-top: 0px;
  transition: margin-top 1s ease-out, max-height 1s ease-out;
}

.secondContent {}

<div class="container">
  <input type="checkbox" id="firstButtonCheck" />
  <label class="firstButton" for="firstButtonCheck"></label>
  <div class="firstContent">
    <h1>923id92i3d93i</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>

  <input type="checkbox" id="secondButtonCheck" />
  <label class="secondButton" for="secondButtonCheck"></label>
  <div class="secondContent">
    <h1>dasdasda</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
</div>