JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="navigation">
        <div id="brand">
			test
        </div>
        <nav>
			<ul id="main-list">
				<li><a href="/">Startseite</a></li>
				<li>
					<a href="/">News</a>
					<ul>
						<li><a href="/">Startseite 1</a></li>
						<li><a href="/">Startseite 2</a></li>
						<li><a href="/">Startseite 3</a></li>
					</ul>
				</li>
				<li><a href="/">Registration</a></li>
			</ul>
        </nav>
	    <div id="search">test</div>
        <div class="clearer"></div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Roboto, Georgia, sans-serif;
}

.clearer {
    clear: both;
}

#navigation {
    height: 50px;

    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;

    background-color: #000;
    color: #eee;
}

#navigation #brand {
    float: left;

    margin-right: 30px;

    font-size: 30px;
}

#navigation nav {
    float: left;
}

#navigation nav #main-list {
    display: flex;
    justify-content: left;
    list-style: none;
}

#navigation nav #main-list > li {
    position: relative;
}

#navigation nav #main-list li a {
    display: block;

    padding: 0 12px;
    
    color: #eee;
    white-space: nowrap;
    text-decoration: none;
}

#navigation nav #main-list li ul {
    position: absolute;
    top: 100%;
    left: 0;

    width: auto;
    list-style: none;

    background-color: #000;
}

#navigation nav #main-list li ul li {
    line-height: 30px;
}


#navigation nav #main-list li ul li a{
    padding: 0 12px;
}

#navigation #search {
    float: right;
}