Misaligned lines

by Sampath

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://www.sun-xfilm.cn/css/bootstrap.css">
<div class="container-fluid">
    
    <div id="header"><div class="row  header">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-8 col-sm-8 col-xs-8"> <h1 class="text-right">Some dummy placeholder - Random text </h1></div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div class="set-sound">
                <img src="images/icons8-sound-50.png" class="img-responsive sound-icon hide">

        <p>Some dummy placeholder</p>
            </div>
        </div>
    </div>
</div>
</div>
    <div id="content"><div class="container-fluid-innerchild">
       <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="col-md-7 col-sm-7 col-xs-7 no-padding">
        <div id="greytext">
            <h2 class="grey">Some dummy placeholder - Random text</h2>
        </div>
        <br>
     <div class="relative">
    <div >
        <div id="hrtext"><p>Some dummy placeholder
    </p></div>
    
    <div id="hr"></div>
</div>
            <div class="identifier" id="div2"></div>
            <div class="series-div">
                <ul class="series-ul">
                  <li class="seriesli" id="div1">A 1</li>
            
                  <li class="seriesli">B 1</li>
              
                  <li class="seriesli">C 1</li>
                
                </ul>
              </div>
            <div id="line"></div>
                   <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" class="img-responsive firstcar-detail fullwidth-img">
           
    </div>
   
               </div>
    
    <div class="col-md-5 col-xs-5 col-sm-5">
        
<div>
    <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" class="img-responsive width70-img firstgraph pointer">
    <img...

CSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

html,
body {
  font-family: 'Ubuntu', sans-serif;
  background-color: lightblue;
  color: #000;
}

#content {
  color: #787878;
}

.container-fluid-child {
  background-color: #fff;
  position: relative;
  padding: 5%;
}

.container-fluid-innerchild {
  background-color: #fff;
  position: relative;
  border-radius: 25px;
}

.text-white {
  color: #fff;
}

.car-image {
  width: 35%;
  max-width: 35%;
  border: 1px solid #000;
}

.step-one {
  width: 130px;
  height: 130px;
  background-color: #81a1b6;
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50%;
}

.sound-icon {
  width: 20px;
  float: left;
  margin-right: 10px;
}

.set-sound {
  position: absolute;
  top: 2.4em;
  width: 100%;
}

.intro-para {
  position: absolute;
  width: 35%;
  font-size: 1.2em;
}

.hyperlink {
  color: #fff;
  text-decoration: none;
  font-size: 1.3em;
}

.hyperlink:hover {
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.hyperlink:focus {
  color: #fff;
  text-decoration: none;
}

.footer {
  padding: 1em;
}

.text-over-image {
  float: left;
  position: absolute;
  bottom: 23em;
  left: 5em;
}

.relative {
  position: relative;
}

.textonimage {
  position: absolute;
  max-width: 30%;
  top: 2%;
  font-weight: 600;
}

.ableft {
  left: 1em;
}

.abright {
  right: 1em;
}

.car {
  cursor: pointer;
}

.grey {
  color: grey;
  font-weight: 600;
  margin-left: 1.5em;
  max-width: 50%;
  position: relative;
  top: 1em;
}

.no-padding {
  padding: 0px;
}

.firstcar-detail {
  border-radius: 25px;
}

#hr {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(-45deg);
  top: 12%;
  left: 18%;
  height: 20%;
  background-color: #000;
  width: 1px;
  position: absolute;

}

#hrtext {
  position: absolute;
  bottom: 85%;
  left:...

JavaScript

$('.seriesli').click(function() {

  function adjustLine(from, to, line) {

    // Get actual position relative to viewport.
    // See https://stackoverflow.com/a/11396681/117030
    fromBCR = from.getBoundingClientRect();
    toBCR   = to.getBoundingClientRect();
    
    var fT = fromBCR.top + from.offsetHeight / 2;
    var tT = toBCR.top + to.offsetHeight / 2;
    
    // Don't add offsetWidth. This connects to the middle, not the left edge.
    var fL = fromBCR.left //+ from.offsetWidth / 2;
    var tL = toBCR.left + to.offsetWidth / 2;

    var CA = Math.abs(tT - fT);
    var CO = Math.abs(tL - fL);
    var H = Math.sqrt(CA * CA + CO * CO);
    var ANG = 180 / Math.PI * Math.acos(CA / H);

    if (tT > fT) {
      var top = (tT - fT) / 2 + fT;
    } else {
      var top = (fT - tT) / 2 + tT;
    }
    if (tL > fL) {
      var left = (tL - fL) / 2 + fL;
    } else {
      var left = (fL - tL) / 2 + tL;
    }

    if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) {
      ANG *= -1;
    }
    top -= H / 2;

    line.style["-webkit-transform"] = 'rotate(' + ANG + 'deg)';
    line.style["-moz-transform"] = 'rotate(' + ANG + 'deg)';
    line.style["-ms-transform"] = 'rotate(' + ANG + 'deg)';
    line.style["-o-transform"] = 'rotate(' + ANG + 'deg)';
    line.style["-transform"] = 'rotate(' + ANG + 'deg)';
    line.style.top = top + 'px';
    line.style.left = left + 'px';
    line.style.height = H + 'px';
  }
  adjustLine(
    this, // Element that was clicked.
    document.getElementById('div2'),
    document.getElementById('line')
  );
});