JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div>
    Header
  </div>
  <div class="body">
    <div class="left">
      Left panel
    </div>
    <div class="right">
      <div class="details">
        <div class="links">
          <button id='btn1'>link 1</button>
          <button id='btn2'>link 2</button>
          <button id='btn3'>link 3</button>
        </div>
        <div class="content">
          <div id="content1"> Content 1</div>
          <div id="content2"> Content 2</div>
          <div id="content3"> Content 3</div>
        </div>
      </div>      
    </div>
  </div>
</div>

CSS

.body {
  display: flex;
  width: 100%;
  border: 1px solid gray;
}
.left {
  flex: 0 0 200px;
}
.right {
  flex: 1 1 auto;
  border: 1px solid green;
}
.details {
  display: flex;
  width: 100%;
}
.links {
  display: flex;
  flex-direction: column;
}
.content { 
  max-height: 100px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.content div {
  min-height: 100px;
}

JavaScript

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2');
var content3 = document.getElementById('content3');
var headerHt = 0;
btn1.addEventListener('click', function (e) {
	alert(content1.offsetTop);
  content1.parentNode.scrollTop = content1.offsetTop - 30;
   // content1.scrollIntoView(true);
});
btn2.addEventListener('click', function (e) {
	alert(content2.offsetTop);
   content1.parentNode.scrollTop = content2.offsetTop - 30;
   // content2.scrollIntoView(false);
});
btn3.addEventListener('click', function (e) {
alert(content3.offsetTop);
		content1.parentNode.scrollTop = content3.offsetTop - 30;
    // content3.scrollIntoView(true);
});