JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex= '1' id='div1' class='div1'>
		<div tabindex='2'  id='div2' class='div2'>this is another div <div>
    with some text
    </div>
    <div>
    that is on multiple lines
    </div></div>
	 </div>

CSS

.div1{

	overflow:auto;
	height:500px;
	width:500px;
	background-color: grey;
}

.div2{

	overflow: auto;
	height:800px;
	width:800px;
	background-color: teal;
}

JavaScript

document.getElementById('div1').onclick = function() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  var scrollTop = div1.scrollTop;
  div2.style.marginTop = (-scrollTop) + 'px';
  div1.scrollTop = 0;
	// give focus to inner div
	document.getElementById('div2').focus();
  setTimeout(function() {
      div2.style.marginTop = '0px';
      div1.scrollTop = scrollTop;
  }, 0);
}