JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <div class="box-1">BOX 1</div>
    <div class="box-2">BOX 2</div>
    <div class="box-3">BOX 3</div>
</div>

CSS

.group {
width: 600px;
height: 300px;    

}
.box-1 {
    width: 50%;
    height: 100%;
    float: left;
    background-color: gray;
    text-align: center;
    float: left; 
}
.box-2 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: blue;
    text-align: center;
    float: left;    
}

.box-3 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: red;
    text-align: center;
    float: left;    
}
@media only screen and (max-width: 599px){
.group {
    width: 100%;
    height: 450px;    
}
.box-1 {
    height: 66.666%;
}
.box-2 {
    height: 66.666%;  
}

.box-3 {
    width: 100%;
    height: 33.333%;
}
}