JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
    <div class="right">
        Боже, тяжелый случай...
    </div>
    <div class="left">
        <div class="logo">Я логотип</div>
        <ul>
            <li>я</li>
            <li>какая-нибудь</li>
            <li>менюшка</li>
            <li>вот</li>
        </ul>
    </div>
</div>
<div class="body">
    И никаких <b>100% - 240px</b>...
</div>

CSS

.head {
    overflow: hidden;
    border: #000 1px solid;
}

.right {
    float: right;
    width: 240px;
    padding: 5px;
    background: yellow;
}

.left {
    margin-right: 250px;
    background: red;
}

.left .logo {
    width: 100px;
    height: 50px;
    padding: 5px;
    background: green;
}

.left ul {
    list-style: none;
    overflow: hidden;
    margin-top: 100px;
    padding: 5px;
    background: grey;
}

.left li {
    float: left;
    padding: 0 5px;
    margin-right: 2px;
    border: #000 1px solid;
}

.body {
    padding: 5px;
    border: blue 1px solid;
}