JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<div class="home"> Home weedjwedbwebdweb dwed </div>
<div class="line"> <hr> </div> 
<div class ="logout">  ddw dieowdoewid ewodijewoi dewod Reports &nbsp; &nbsp; 
<button> <a href="web url"> log out </a> </button>
</div>
</section>

CSS

.line {
vertical-align:middle;
display:table-cell;
padding-left: 120px;
padding-right: 200px;
width:65%;
}
hr{
  border:1px solid red;
}

section {
width: 100%;
margin: auto;
display:table;
}

.home {
width: 20%;
padding-left:50px;
display:table-cell;
vertical-align:middle;
}
.home.hover{
  background-color: rgba(0,149,255,0.2);
}

.logout {
width: 15%;
display:table-cell;
vertical-align:middle;
padding-right: 50px;
}