JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">
    <div id="left-block">
        <h1>A long title here, so long that it cause item menu overlap</h1>
    </div>
</div>
<div id="right-block">
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
    </ul>
</div>

CSS

#logo {
    position: absolute;
    z-index: 1;
}

#left-block {
    background-color: red;
    height: 50px;
}

#right-block {
    float: right;
    background-color: blue;
    height: 50px;
    z-index: 5;
}

ul {
    float: right;
    list-style: none;
}

li {
    display: inline;
    margin: 0 5px 0 0px;
}