how can i make only parts of div sticky?

div {
  color: red;
  text-align: right;
  font-size: 3rem;
}

.sticky {
  position: sticky;
  top: 4.5rem;
  bottom: 1em; /* bigger than 0 since the element is having height=0 */
  text-align: right;
  color: blue;
  background-color: transparent;
  padding: inherit;
  font-size: 3rem;
  z-index: 999;
  
  height:0; /* this will make them above each other */
}

.sticky > *:not(.main) {
  visibility:hidden;
}
.dupe > .main {
  visibility:hidden;
}

<br><br><br>

<div>1 1 1 1 1 1</div>
<div>2 2 2 2 2 2</div>

<div class="sticky"><span class="main">3 3 3</span> <span>4 4 4</span> </div>
<div class="dupe"><span class="main">3 3 3</span>   <span>4 4 4</span> </div>

<div>5 5 5 5 5 5</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>