JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.wrap {
        display: flex;
        flex-flow: row wrap;
    }
    
    .left {
        min-height: 50px;
        border: 2px dashed #f0f;
        order: 1;
        flex-grow: 1;

    }
    
    .right {
        min-height: 50px;
        border: 2px dashed #00f;
        order: 2;
        width: 200px;
        margin-left: 10px;
    }
    
    @media only screen and (max-width: 600px) {
       .right,
       .left {
        flex: 1 100%;
        margin: 0;
      }
    }