How to adjust markdown block CSS "Read More" button after it's been triggered

Site URL: https://manshaplan.com/

Hi! 

Website: https://manshaplan.com/ 

Password: password

I've created a "read more" button using a markdown block and added an image to be revealed after button is triggered. Problem is, once the image is revealed the "read less" button is in the middle of the image. I can't figure out how to move the button placement down after its been triggered without effecting the button placement in its "read more" state as well (I want the button to be where it is in it's "read more" state and only lower the placement in the "read less" state). Any help is super appreciated! Attached screen shots of issue as well as code below: 

Markdown Block Code: 

<div class="show-hide">
 <input type="checkbox" class="read-more-state" id="visible22"/>
 <div class="read-more-wrap">

 <center>
 <p>
       <h3>20 Years of Planning, Experience, and Results.</h3>
   </p>
       <div class="read-more-target">
     <p>
 <img style=" margin: 30px auto; display: block;" height="Auto" width = "Auto" src="https://static1.squarespace.com/static/5e9f058c4ff1d847cfe30e06/t/5fa2d7ced7a9fd3ad600f35b/1604507598737/Home+Page+Illustrations+-+Timeline+-+Desktop-03.png">
     </p>
     </div>     
</center>
 </div>
     <label for="visible22" class="read-more-trigger"></label>
</div>
<div class="show-hide">
 <input type="checkbox" class="read-more-state" id="visible23"/>
 <div class="read-more-wrap">

CSS Code: 

/* Who We Are - dropdown - Our History - dropdown - TEXT Agjustment*/

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
        -ms-transform: translateY(0%);
  transform: translateY(0%);
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state ~ .read-more-trigger:before {
  content: 'Read More';
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Read Less';
}

/* Who We Are - dropdown - Our History - BUTTON Agjustment*/

#block-yui_3_17_2_1_1604505134181_21917
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 45%;
  margin-bottom: -10px; 
  margin-top: -10px;
  margin-left: 15px; 
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2.5;
  border: 1px solid rgba(225, 187, 35, .5);
  border-radius: .25em;
      -ms-transform: translateY(20%);
  transform: translateY(20%);
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-trigger:hover {
  background:rgba(225, 187, 35, .5);
  color:black;
  opacity: .7;
}