JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding=0 cellspacing=0 border=0 width="80%">
<tr>
    <th>Tasks</th>
    <th>Skills</th>
    <th>Priority</th>
    <th>Task</th>
</tr>
<tr>
    <td><p>Activity</p><span class="delete">X</span></td>
    <td><p>Dev</p><span class="delete">X</span></td>
    <td><p>High</p><span class="delete">X</span></td>
    <td><p>Task</p><span class="delete">X</span></td>
</tr>
<tr>
    <td><p>MCR</p></td>
    <td><p>Dev</p></td>
    <td><p>Medium</p></td>
    <td><p>Task</p></td>
</tr>
</table>

CSS

body { font: 14px 'Arial' }
table td, table th { border: 1px solid #CCC; padding: 10px 4px;  }

JavaScript

function adjustLine(from, to, line){

	var fT = from.offsetTop  + from.offsetHeight/2;
  var tT = to.offsetTop 	 + to.offsetHeight/2;
  var fL = from.offsetLeft + from.offsetWidth/2;
  var tL = to.offsetLeft 	 + 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';
}
(function(){
 //select the answer
 $('p').click(function(){
 	$(this).addClass('active');
  console.log($(this));
 })
 //Remove the selected answer
 $('.delete').click(function(){
 //debugger;
 	$(this).prev().removeClass('active');
  console.log($(this));
 })
 
 //Draw the line from the previous active element
 
 
 
 
})();