JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
	<div class="table-cell table-cell-ok">
		<span>Test</span>
	</div>
	<div class="table-cell table-cell-bug">
		<span>Test</span>
	</div>
</div>

CSS

div.table {
    display: table;
    width: 100%;
}
div.table-cell {
    display: table-cell;
    padding: 20px 5%;
}

span 
{
     border-bottom: 1px solid transparent;   
}


div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

div.table-cell-ok {
    background: #dfd;
}
div.table-cell-bug {
    background: #fdd;
}