JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gridBlock">
    <div class="list-lot-item">
        <div class="list-lot-item-info">
            <a href="#" class="list-lot-item-col1">
                ()__()
            </a>
            <div class="list-lot-item-col2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|||               
            </div>                       
            <div class="list-lot-item-col3">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/|\ 
            </div>
        </div>
    </div>
    <div class="list-lot-item">
        <div class="list-lot-item-info">
            <a href="#" class="list-lot-item-col1">
                ()__()
            </a>
            <div class="list-lot-item-col2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|||                 
            </div>
                        
            <div class="list-lot-item-col3">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/|\                
            </div>
        </div>
    </div>
    <div class="list-lot-item">
        <div class="list-lot-item-info">
            <a href="#" class="list-lot-item-col1">
                ()__()
            </a>
            <div class="list-lot-item-col2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|||                
            </div>
                        
            <div class="list-lot-item-col3">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/|\ 
            </div>
        </div>
    </div>
    <div class="list-lot-item">
        <div class="list-lot-item-info">
            <a href="#" class="list-lot-item-col1">
                ()__()
            </a>
            <div class="list-lot-item-col2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|||               
            </div>                       
            <div class="list-lot-item-col3">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/|\
            </div>
        </div>
    </div>
    <div class="list-lot-item">
        <div class="list-lot-item-info">
            <a href="#" class="list-lot-item-col1">
 ...

CSS

#gridBlock{
    margin:10px;
    width:165px;
}
#gridBlock .list-lot-item{
    float:left;
    position:relative;
    height:25px;
    width:50px;
    border:1px solid #fff;
    padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
    display:block;
    position:absolute;
    background-color:#fff;
    border:1px solid #fff;
    width:50px;
}
#gridBlock .list-lot-item-info{
    z-index:199;
}
#gridBlock .list-lot-item-info-on{
    border:1px solid red;
    top:0;
    z-index:200;                            
    position:relative;
    background-color:yellow;
}

#gridBlock .list-lot-item-col1{
    display:block;
    height:23px;
    width:50px;
    text-align:center;  
    text-decoration:none;                
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}

.clear,.clear-grid{clear:both;}

JavaScript

$('#gridBlock .list-lot-item').hover(
  function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
  function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);