JSFiddle - React, Tailwind, and code Playground

HTML

<div class="admin-header">
    <div class="table-row">
        <div class="admin-header-left">
           <a class="nav-btn rounded-left" href="#">New Order</a><a class="nav-btn" href="#">Invoices</a><a class="nav-btn rounded-right" href="#">Portfolio</a>
        </div>
        <div class="admin-header-right">
            <p>Hello <b>Joe Smith Brown Jones</b> | <a href='#'>account</a>d | <a href='#'>settingsaaa</a> | <a href='#'>help</a> | <a href='#'>exit</a>d dsafsdaf sd fskdjhf dskjhfsdkj hfsdha dasf ja</p>
        <div>
    </div>
</div>

CSS

body { color: #CCCCCC; font-family: 'Lucida Grande', 'Trebuchet MS'; font-size: 100%; }
a, a:link, a:visited, a:focus { color:#4188FB; }
a:active, a:hover { color:#FFCC00; }

/* header */
.admin-header { 
    width: 700px; 
    padding: 15px 10px; 
    background: #505050; 
    display:table;
    vertical-align:middle;
}
.table-row{
    display:table-row;
}
.admin-header-left { 
   
    display:table-cell;
    border:1px solid red;
    vertical-align:middle;
 
    

}
.admin-header-right { 
    display:table-cell;
    border:1px solid red;
    width:100px;
}
.admin-header-right p {
    text-align: right;
    line-height: 150%;
}

/* buttons */
a.nav-btn, a.nav-btn:link, a.nav-btn:visited, a.nav-btn:focus { padding: 5px 15px; margin-right: 2px; text-decoration: none; color: white; background-color: #4188FB; }
a.nav-btn:active, a.nav-btn:hover { color: white; background-color: #FFCC00; }

.rounded-left { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -opera-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
.rounded-right { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -opera-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }