JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<section class="alpha g-11 omega" id="library-filters">
    <div class="alpha g-6"  id="library-options">
            <ul id="filters" class="option-set clearfix" data-option-key="filter">
                <li><a href="#filter" data-option-value=".ccskills" class="selected">Creative &amp; Cultural Skills</a></li>
                <li><a href="#filter" data-option-value=".other">External Publications</a></li>
                <li><a href="#filter" data-option-value="*">All</a></li>
            </ul>
    </div>
    <div class="g-5 omega">
        <select id="industry-dropdown">
            <option value="" selected>Select an industry</option>
            
            <option value=".creative-industries">Creative industries</option>
            
            <option value=".craft">Craft</option>
            
            <option value=".cultural-heritage">Cultural Heritage</option>
            
            <option value=".design">Design</option>
            
            <option value=".literary-arts">Literary Arts</option>
            
            <option value=".music">Music</option>
            
            <option value=".performing-arts">Performing Arts</option>
            
            <option value=".visual-arts">Visual Arts</option>
                                    
        </select>
    </div>
    </section>
    <section id="library" style="border: 1px solid blue;">
    
    <div class="publication creative-industries ccskills ">
        <div class="left_listing_image">
            
                           <img src="http://creative-blueprint.co.uk/images/template/image_coming_soon.jpg" width="96" height="135" />
                    </div>
        <div class="left_listing">
            <h3>
                <a href="http://creative-blueprint.co.uk/library/item/the-qualifications-blueprint-a-qualifications-strategy-for-the-creative-and" class="pub_name">The Qualifications Blueprint: A...

CSS

[class*="g-"] {
  position: relative;
  float: left;
  display: inline;
  margin-left: 10px;
  margin-right: 10px; }
.row {
  margin-bottom: 20px; }
  
.border {padding-right:9px; margin-right:0px; border-right:1px solid #dedede}
.colborder {padding-right:30px; margin-right:29px; border-right:1px dotted #dedede}

/* Nested Column Classes */
.alpha                  { margin-left: 0; }
.omega                  { margin-right: 0; }

/* Base Grid */
.g-1                    { width: 40px;  }
.g-2                    { width: 100px; }
.g-3                    { width: 160px; }
.g-4                    { width: 220px; }
.g-5                    { width: 280px; }
.g-6                    { width: 340px; }
.g-7                    { width: 400px; }
.g-8                    { width: 460px; }
.g-9                    { width: 520px; }
.g-10                   { width: 580px; }
.g-11                   { width: 640px; }
.g-12                   { width: 700px; }
.g-13                   { width: 760px; }
.g-14                   { width: 820px; }
.g-15                   { width: 880px; }
.g-16                   { width: 940px; }

.left_listing_image {float:left; width:15%; margin-right:5%}
.left_listing {float:left; width:79%}

/**** Isotope Filtering ****/
.isotope-item { z-index:2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index:1; }

/**** Isotope CSS3 transitions ****/
.isotope,.isotope .isotope-item { -webkit-transition-duration:.8s; -moz-transition-duration:.8s; transition-duration:.8s; }
.isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; transition-property:height, width; }
.isotope .isotope-item { -webkit-transition-property:0 opacity; -moz-transition-property:0 opacity; transition-property:transform, opacity; }

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition { -webkit-transition-duration:0; -moz-transition-duration:0;...

JavaScript

$(function(){

$container = $('#library');
        
        var $optionSets = $('.option-set'),
            $optionLinks = $optionSets.find('a');
        
        // select ccskills publications by default on library page
        //if ($('.ccskills').length > 0 ){
        if ($container) {
            $container.isotope({ filter: '.ccskills'})
        }
    
        $optionLinks.click(function(){
            var $this = $(this);
            // don't proceed if already selected
            if ( $this.hasClass('selected') ) {
            return false;
            }
            var $optionSet = $this.parents('.option-set');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');
            
            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value')+$("#industry-dropdown option:selected").val();
            
            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[ key ] = value;
            $container.isotope( options );
            return false;
        });
                                                                        });