JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option value="us">United States</option>
    <option value="at">Austria</option>
    <option value="es">Spain</option>
    <option value="br">Brazil</option>
    <option value="ca">Canada</option>
    <option value="uy">Uruguay</option>
    <option value="gt">Guatemala</option>
    <option value="de">Germany</option>
    <option value="gb">United Kingdom</option>
    <option value="fr">France</option>
    <option value="vi">Dominican Republic &amp; Virgin Islands, US</option>
</select> <br /> <br />
<div class="country"><i></i> <b>Spain</b></div>

CSS

.country {
    margin: 10px;
    padding: 4px 6px;
    border: 1px solid #999;
    border-radius: 5px;
    display: inline-block;
    font-family: tahoma;
    font-size: 12px
}
.country i {
    background: url(https://dl.dropboxusercontent.com/s/izcyieh1iatr4n5/flags.png) no-repeat;
    display: inline-block;
    width: 16px;
    height: 11px;
}

JavaScript

(function ($) {
    // size = flag size + spacing
    var default_size = {
        w: 20,
        h: 15
    };

    function calcPos(letter, size) {
        return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
    }

    $.fn.setFlagPosition = function (iso, size) {
        size || (size = default_size);
        
        var x = calcPos(iso[1], size.w),
            y = calcPos(iso[0], size.h);

        return $(this).css('background-position', [x, 'px ', y, 'px'].join(''));
    };
})(jQuery);

// USAGE:

(function ($) {

    $(function () {
        var $target = $('.country');
        
        // on load:
        $target.find('i').setFlagPosition('es');

        $('select').change(function () {
            $target.find('i').setFlagPosition(this.value);
            $target.find('b').text($(this).find(':selected').text());
        });
    });

})(jQuery);