Untitled

dabblet.css

.wrapper {
	 display: grid;
	 background: gray;
	 display: grid;
	 width: 200%;
	 grid-template-columns: 1fr 1fr;
}

input:checked + .wrapper {
}

.content {
 background: red;
 opacity: 0;
 transition: opacity 1s ease;

}

input:checked + .wrapper .content {
	 grid-template-rows: 1fr;
	 /*position: static;*/
	 width: auto;
	 opacity: 0;
 transition: opacity 3s ease;
 }

.content2 {
display: grid;
 grid-template-rows: 1fr;
 background: green;
 transition: 
 	grid-template-rows 1s ease;
}

input:checked + .wrapper .content2 {
  grid-template-rows: 0fr;
 transition: 
 	grid-template-rows 1s ease 1s;  /*height: 0;*/

 }
.content2-inner {
	margin-left: -100%;

	overflow: hidden;
	opacity: 1; 
	position: relative;
	transition: opacity 1s ease 1s;
}
 
 input:checked + .wrapper .content2 .content2-inner {
 	opacity: 0;
	transition: opacity 1s ease;
 }

dabblet.html

<input type="checkbox" />
<section class="wrapper">
 <div class="content">
  <div class="content-inner">different</div>
 </div>
 
 <div class="content2">
  <div class="content2-inner">
   content2 lmao aue<br>
   <br>
   content
   <br>
   content
   <br>
   content
   <br>
   content
   <br>
   content     <br>
  </div>
 </div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}