JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="right">
        <p>Right</p>
    </div>
    <div class="left">
        <p>Left</p>
    </div>
</div>

CSS

.outer {
    min-width:5em;
    max-width:20em;
    border:dotted 1px #ddd;
}
.left, .right {
    border: solid 1px #666;
}
.right {
    width:5em;
}
.left {
    min-width:10em;
    max-width:15em;
}
@media (min-width:17em) {
    .right {
        float:right;
    }
    .left {
        margin-right:5em;
    }
}