JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="no-filter order order-size-desc">
    <div class="red big">asd</div>
    <div class="red small">fgh</div>
    <div class="green small">zxc</div>
    <div class="green big">jkl</div>
    <div class="green small">zxc</div>
</div>

CSS

.red {color: red}
.green {color: green}
.big {font-size: 20px}
.small {font-size: 14px}

.big, .small {display: none}
.big-filter .big, .no-filter .big {display: block}
.small-filter .small, .no-filter .small {display: block}

div {width: 800px;}

.order {position: relative;}
.order-size-desc .big {position: relative; top: 0; float: left;}
.order-size-desc .small {position: relative; top: 140px; margin-top: -120px; float: left;}

JavaScript

// Фильтр на основе CSS