JSFiddle - React, Tailwind, and code Playground

HTML

<div class="smallerSize">
    <span>Small Size</span>
</div>

<div class="biggerSize">
    <span>Bigger Size</span>
</div>

CSS

.smallerSize
{
    display:none;
}

.biggerSize
{
    display:none;
}

JavaScript

$( document ).ready(function() {
    
     if($( window ).width() <= 500)
     {
         $( ".smallerSize" ).css('display','block');
     }
     else
     {
        $( ".biggerSize" ).css('display','block');
        $( ".biggerSize" ).css('color','red');

     }
});

$( window ).resize(function() {
     if ($( window ).width() <= 500)
     {
         $( ".biggerSize" ).css('display','none');
         $( ".smallerSize" ).css('display','block');
     }
     else
     {
         $( ".smallerSize" ).css('display','none');
         $( ".biggerSize" ).css('display','block');
     }
    
});