JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav_bar">
    <div class="titles">
        <div class="forum_title">
            <a href="#">forum name forum name forum name</a>
        </div>
        <a href="#" class="thread_title">thread title, may be very long thread title, may be very long thread title, may be very long thread title, may be very long thread title, may be very long thread title, may be very long</a>
    </div>
</div>

CSS

.nav_bar { width:950px; height:44px; position:relative; background:#454545; overflow:hidden;}
a {color:#aaa;}
.titles { max-widht:628px; overflow:hidden; white-space:nowrap; display:inline-block; float:left;}
.forum_title {background-color: #223344; display: inline-block; float: left; height: 29px; padding:15px 17px 0 10px; }
.forum_title > a { display:inline-block; max-width:145px; white-space:nowrap; overflow:hidden;}
.forum_title > a:hover { max-width:none;}
.thread_title { margin: 15px 0 0 10px; white-space:nowrap; outline:1px solid red; display:inline-block;}