JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list1">
    <li id="qq1">sdfsdv</li>
    <li id="qq2">bnvnvb</li>
    <li id="qq3">nmnutymnj7</li>
    <li id="qq4">cvbc</li>
    <li id="qq5">45tsgd</li>
</ul>
<div id="segment1" class="hline"></div>
<div id="segment2" class="vline"></div>
<div id="segment3" class="hline"></div>
<ul class="list2">
    <li id="aa3">fgtbrtgb</li>
    <li id="aa1">vbn xgbn</li>
    <li id="aa5">vdgver</li>
    <li id="aa4">asdasdv</li>
    <li id="aa2">nvfbnfn</li>
</ul>

CSS

.highlight {
    background-color: red;
}

.list1 {
    display:block;
    float: left;
    width: 150px        
}

.list2 {
    display:block;
    float: left;
    width: 150px
}

.hline {    
    position:relative;
    height: 1px;
    width: 20%;
    color:#fff;   
    float:left;
    display:block;
}

.vline {
    position:relative;
    display:block;
    float:left;
    height: 1px;
    width: 1px;    
}

JavaScript

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    var leftY = $('#qq' + n).position().top;
    var rightY = $('#aa' + n).position().top;
    var H = Math.abs(rightY-leftY);
    if (H == 0) H = 1;
    $('#segment1').css('top',leftY+'px');
    $('#segment3').css('top',rightY+'px');
    $('#segment2').css('top',Math.min(leftY,rightY)+'px');
    $('#segment2').css('height',H+'px');
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight");
});