能否用纯CSS实现基于其他HTML元素属性定位并调整div尺寸？

现有JavaScript方案可实现点击按钮后让#follower元素与#target元素的垂直位置及尺寸匹配，但该脚本需在窗口每次resize时重新执行。请问是否存在纯CSS方案，无需JS即可让#follower元素与#target元素的垂直区域完全重合？

参考代码 #

HTML代码 #

<button onclick="adjust()">Adjust</button>
<div class="parent">
  <div class="sideline">
    <div id="follower">Sidenote</div>
  </div>
  <div class="essay">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut malesuada erat. Nulla iaculis, justo eu consequat placerat, ex purus fringilla quam, nec molestie diam felis in dui. Etiam ut tincidunt risus, nec maximus velit. Vestibulum elementum
    tristique nisl, in aliquet sem fringilla quis. In turpis est, cursus a placerat quis, ultrices vel augue. Ut a risus rhoncus mi tempor bibendum vitae sit amet sem. Morbi eget mi ultricies, sodales nisl in, sollicitudin dolor.
    <span id="target">Vivamus luctus efficitur libero eu laoreet. Nunc id erat sed nunc hendrerit iaculis non ut quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </span> Fusce ut dolor eget orci semper vulputate vel ut erat.
  </div>
</div>

CSS代码 #

.parent {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.sideline {
  grid-area: 1 / 1 / 1 / 1;
}

.essay {
  grid-area: 1 / 2 / 1 / 2;
  position: relative;
}

#target {
  background-color: yellow;
}

#follower {
  background-color: yellow;
}

JavaScript代码 #

function adjust() {
  const target = document.getElementById('target');
  const follower = document.getElementById('follower');
  follower.parentElement.style.position = 'relative';
  follower.style.position = 'relative';
  follower.style.top = target.offsetTop + 'px';
  follower.style.height = target.offsetHeight + 'px';
}

内容的提问来源于stack exchange，提问作者Passiday