X div sized relative to Y div

1

Hey guys and gals,

Google and StackOverflow have failed me. I’ve got a textarea input element that can be resized by the user. What is inputted there gets outputted to an adjacent div.

I would like the two elements, the textarea and the div, to keep the same vertical size. So, if the user resizes the textarea, the div next to it should resize as well.

Any ideas?

Bonus complication: I’m doing this within a react application. In previous webapps I’ve used jQuery’s $("#divID").css("height"); and I’d be willing to use it here but, I’m not sure how to get it to play nice within react.

Thanks in advance.

2 
const p1 = document.querySelector('.p1') //some div
const p2 = document.querySelector('.p2') //textarea

function handleResize(){
  p1.style.height = `${p2.clientHeight}px`;
}
handleResize();

p2.addEventListener('mousemove', handleResize)
p2.addEventListener('input', function(){
  p1.textContent = this.value
});

this function runs every time you move cursor on top of textarea,
you could improve this by flagging whether you’re on mousedown at the same time