JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="Clare">Clare</div>
<div id="Cork">Cork</div>
<div id="Limerick">Limerick</div>

<div id="selcountwrapper">
    <div id="selectedCounties" class="selectedCounties">
         <span class="helper"></span>
        <div title="Co. Limerick" class="Limericksmall sprite-smallcrests"></div><div title="Co. Cork" class="Corksmall sprite-smallcrests"></div><div title="Co. Clare" class="Claresmall sprite-smallcrests"></div>
    </div>
</div>

CSS

.Claresmall { background-position:  -25px -0px; height: 27px; width: 25px; }
.Corksmall { background-position:  -25px -27px; height: 27px; width: 25px; }
.Limericksmall { background-position:  -125px -0px; height: 36px; width: 25px; }

.sprite-smallcrests { background-image: url(http://danu2.it.nuigalway.ie/09101916/trazoo/demo_3/images/smallcrests.png); }

#selectedCounties .sprite-smallcrests {
    /* float: left; */ /* removed. no need for, because we apply display: inline-block */
    margin-left: -3px;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align: middle;
    
}

.helper {
    height: 36px;
    display: inline-block;
    vertical-align: middle;
}

#selcountwrapper {
    height: 36px;
}

JavaScript

$('#Clare, #Cork, #Limerick').click(function(){
    $('<div/>', {
          title: 'Co. '+this.id,
        'class': this.id+'small sprite-smallcrests'
    }).appendTo('#selectedCounties');
});