JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="navigation">
        <ul id="common-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
        </ul>
        <ul id="admin-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <p>Hello world.</p>
        <p>This is supposed to be content.
            But only thing we care is the menu (Sorry about that.)
        </p>
        <p>Page width decreases, some items magically disappear.<br />
            Which is <strong>intended</strong>.<br />
            You can do that by pulling the frame bars around.
        </p>
    </div>
</div>

CSS

#wrapper {
    background: #eee;
    width: 100%;
    min-width: 450px;
    max-width: 700px;
    margin: 0 auto;
}
#navigation {
    height: 40px;
    background: #f00;
    width: 100%;
    overflow: hidden;
}
#navigation > ul {
    overflow: hidden;
}
#navigation li {
    float:left;
}
#navigation li a {
    padding: 10px;
    display:inline-block;
    background: #0c0;
    outline: solid 1px #0c0;
}
#navigation #admin-links {
    width: 220px;
}
#navigation a.omittable {
    background: #0f0;
}