JSFiddle - React, Tailwind, and code Playground

by giampaolo44

HTML

<div id='header'>Header</div>
<div id="mainpost">
    <div id="alignwithme1">Align with Me 1</div>
    <div id="usual1"></div>
    <div id="alignwithme2">Align with Me 2</div>
</div>

<div id='sidebar' >
    <div id="se1">Sidebar element 1</div>
    
    <div id="se2">sidebar element 2</div>
</div>

CSS

#header{width:auto; height:25px; font-size:15px; text-align:center;background:black; color:white;}
#mainpost{width:50%; height:auto; background:yellow; color:black;padding:12px;float:left;}
#usual1{width:160px;height:145px;background:black;color:white;margin:10px;}
#alignwithme1{width:auto; height:50px;background:black;color:white;margin:10px;text-align:center;padding:4px;}
#alignwithme2{width:auto; height:50px;background:black;color:white;margin:10px;text-align:center;padding:4px;}
#sidebar{width:40%; height:auto;float:right;}
#se1{width:auto;height:35px;color:black;background:#44accf;padding:9px;text-align:center;margin:10px;}
#se2{width:auto;height:35px;color:black;background: #44accf;padding:9px;text-align:center;margin:10px;}

JavaScript

function getOffset(el) {
  // console.log(el);
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

var el_from = document.getElementById("alignwithme1")
var el_to = document.getElementById("se1")
new_style = "position: absolute; width:270px; top: " + getOffset(el_from).top + "px;"
// console.log(new_style)
el_to.style= new_style;


el_from = document.getElementById("alignwithme2")
el_to = document.getElementById("se2")
new_style = "position: absolute; width:270px; top: " + getOffset(el_from).top + "px;"
// console.log(new_style)
el_to.style= new_style;