JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a></li>
    <li><a href="#">Text 2</a></li>
    <li class="your_space"><a href="#"><span>Text3</span></a></li>
  </ul>
</div>

CSS

.menu_right{
  float:right;
}
ul.menu li{
  float: left;
  list-style-type: none;
  border:2px solid transparent;
}
ul.menu li a{
  text-decoration:none;
}
li.your_space{
  width:100px;
}
li.your_space:hover{
  border: 2px solid black;
}
li.your_space a>span{
  display:block;
}