JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<code>Two variable-width elements aligned at opposite ends of the same row when there is enough space.<code>
</p>
<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
</div>

<p>
<code>Two variable-width elements stacked vertically and aligned-left when there is not enough space.</code>
</p>
<div class="container">
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
</div>

CSS

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 700px;
}

.box1 { width: 100px; }
.box2 { width: 150px; }
.box3 { width: 400px; }
.box4 { width: 500px; }


/* can ignore styles below; decorative only */

.container {
    padding: 6px 0;
    background-color: yellow;
    border: 1px solid #ccc;
}

.box {
    height: 50px;
    background-color: lightgreen;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

p { margin-bottom: 5px; }