JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <ul>
        <li class="one">70%</li>
        <li class="two">30% - 80px</li>
        <li class="three">80px</li>
    </ul>
</header>

CSS

header {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    position: relative;
    padding: 0; /* reset css*/
    margin: 0; /* reset css*/
    padding-right: 80px;
    list-style: none;
}

li {
    float: left;
}
.one{
    width: 70%;
    background: red;
}
.two{
    width: 30%;
    background: blue;
}

.three{
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    background: orange;
}