JSFiddle - React, Tailwind, and code Playground

HTML

<div class="right">
    right content fixed width
</div>

<div class="left">
    left navbar variable width
</div>





<br> <br> This is what I want, except when the media query kicks in, I need the navbar above the content.

CSS

.right {
    width: 200px;
    float: right;
    background:green;
}

.left{
    background:red;
    margin-right: 200px;

}


@media (max-width: 500px) {
    
.left {
    width: 100%;
}

.right { 
    width: 100%;

}