JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mob_srsh_list">
        <a href="javascript:;" class="tri2 desk_hide"></a>
        <div class="mnu2 mob_hide">
        This content should be always visible for page width greater than 500px and visible if the filer menu is selected
        </div>
    </div>

CSS

.desk_hide{display: none;}
.mob_hide{display: block;}

.tri2{}
.mnu2{display: none;}
.tri2 {
    background: url("http://files.softicons.com/download/application-icons/menu-icons-by-androidicons/png/48/filter.png") no-repeat scroll 0 0;
    display: inline-block;
    height: 51px;
    width: 50px;
}

.desk_hide{ display: none}
.mob_hide{display: block}

@media only screen and (min-width:200px) and (max-width:500px)
{
.mob_srsh_list{ display: block;}
.desk_hide{ display: block}
.mob_hide{display: none}    
}

JavaScript

var mainsearchpagetoggle	=	jQuery.noConflict();
mainsearchpagetoggle(document).ready(function(){

   mainsearchpagetoggle(".tri2").click(function(){
		mainsearchpagetoggle(".mnu2").slideToggle("slow");				
   });
    filtermshow(window).on('resize', function(){
       var win = filtermshow(this); //this = window
        if (win.width() >= 500) { 
            filtermshow('.mob_hide').css({
            display: 'block',
            });
        }               
    });
});