JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav_bar">
        <div class="nav option1">
            <h2>Option 1</h2>
        </div>
        <div class="nav option2">
            <h2>Option 2</h2>
        </div>
</div>

CSS

#nav_bar{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: black;
    display: flex;
    flex-direction: row;
}

.nav{
    width: 100%;
    height: 50px;
    transition: 0.33s;
    text-align: center;
    cursor: pointer;
}

.option1{
    border-bottom: 2px solid #4387ff;
}

.option2:hover{
    border-bottom: 2px solid #4387ff;
}

.option2:hover + .option1{
   border: none;
}