JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section group">
<div class="col span_1_of_3 first">
This is column 1
</div>
<div class="col span_1_of_3 second">
This is column 2
</div>
<div class="col span_1_of_3 third">
This is column 3
</div>
</div>

CSS

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
} 

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GRID OF THREE           ============================================================================= */


.span_3_of_3 {
width: 100%; 
}

.span_2_of_3 {
width: 66.1%; 
}

.span_1_of_3 {
width: 32.2%; 
}

body {margin:0;}
 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

 @media only screen and (max-width: 480px) {
.span_3_of_3 {
    width: 100%; 
}
.span_2_of_3 {
    width: 100%; 
}
.span_1_of_3 {
    width: 100%;
    margin: 0;
}
    
.third {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
}
    
    
}

JavaScript

$(window).resize(function(){
    if ($(".third").css("position") == "absolute") 
    {
        $(".first").css("margin-top", $(".third").height());
    }
    else
    {
        $(".first").css("margin-top", "1%");
    }
});

if ($(".third").css("position") == "absolute") 
    {
        $(".first").css("margin-top", $(".third").height());
    }