JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red"></div><!--
--><div id="green"></div><!--
--><div id="blue"></div>

CSS

* {
    padding: 0;
    margin: 0;
}

div {
    height: 50px;
}

#red {
    width: 300px;
    background-color: red;
    display: inline-block;
}

#green {
    width: 300px;
    background-color: green;
    display: inline-block;
}

#blue {
    width: 300px;
    background-color: blue;
    display: inline-block;
}

@media screen and (max-width: 940px) {
    #red {
        margin-top: 50px;
        width: 49%;
    }
    
    #green {
        margin-top: 50px;
        width: 49%;
    }
    
    #blue {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}