JSFiddle - React, Tailwind, and code Playground

HTML

<div class="onHoverText">
    <div class="a">Text A</div>
    <div class="b">Text B</div>
    <div class="c">Text C</div>
    <div class="outputBox"><span>This is Text B</span></div>
</div>

CSS

.onHoverText {
    cursor: pointer;
    height:30px;
}
.a, .b, .c {
	display: inline-block;
	margin-right: 3%;
	font-size: 15px;
}
.b {
	color: #FF0004;
	border-right: thin dashed #3A3A3A;
	border-left: thin dashed #3A3A3A;
	padding: 0 2%;
}
.a:hover, .c:hover {
	color: #FF0004;
}
.outputBox {
	font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span{
    display: none;
}
div.a:hover ~ div.outputBox:after {
    content: ' This is Text A';
}
div.c:hover ~ div.outputBox:after {
    content: ' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
	color: #000;
}
.onHoverText:hover .b{color:#000;}
.b:hover{color:#FF0004 !important}