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 {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #000;
}

li {
    display: table-cell;
}
.one{
    width: 70%;
    background: red;
}
.two{
    width: auto;
    background: blue;
}

.three{
    width: 80px;
    background: orange;
}