JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>

CSS

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}
.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}
@media only screen and (max-width: 600px) {
    .main {
        display: table;
    }
    .right {
        display: table-footer-group;
        float: none;
        width: 100%;
    }
    .left {
        display: table-header-group;
        float: none;
        width: 100%;
    }
}