JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="child">
        <a href="#">Start</a>
        <a href="#">Extra</a>
    </div>
    <div class="child child-right">
        <a href="#">Credits</a>
        <a href="#">About</a>
    </div>
</div>

CSS

/*--------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

/*--------------------------------------------------------*/

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    border: solid 1px black;
}

.child {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

/*--------------------------------------------------------*/