JSFiddle - React, Tailwind, and code Playground

HTML

<div class='nav'>
    <div class='container'>
        <div class='left_bottom'>
            LEFT/BOTTOM
        </div>
        <div class='right_top'>
            RIGHT/TOP
        </div>
    </div>
</div>

CSS

.nav{
    background-color: silver;
}
.container{
    width: 100%;
    display: flex;
}
.left_bottom{
    padding: 15px 0 15px 0;
    background-color: red;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    background-color: green;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500px){
    .container{
        flex-direction: column-reverse;
    } 
    .left_bottom, .right_top{
        width: 100%;
    }
}