JSFiddle - React, Tailwind, and code Playground

HTML

<div class="styled">
	<select required="" name="" id="">
        <option value=""> Title </option>
        <option value="Mr"> Mr</option>
        <option value="Mr"> Mrs</option>
        <option value="Ms"> Ms </option>
	</select>
</div>

CSS

.styled{
 background: #FFBBBB url('http://wiki.laptop.org/images/thumb/a/a9/542-stopicon.png/35px-542-stopicon.png') no-repeat right top;
 border: 1px solid #CDCCCC;
 border-radius: 4px;
 box-shadow: 0 0 5px 1px #EAEAEA inset;
 height: 36px;
 margin-bottom: 3px;
 overflow: hidden;
 width: 300px;
}
    
select {
    background: transparent;
    border: medium none;
    color: #2D2D2D;
    font-size: 0.75em;
    height: 35px;
    margin: 0 0 1.2em;
    padding: 0.75em 0.8em 0.6em 0.6em;
    width: 111%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    select.expand {
        width: 200px !important;
    }

JavaScript

$(document).ready(function () {
      $('select:not(.short)')
        .bind('focus mouseover', function () {
            $(this).addClass('expand').removeClass('clicked'); 
         })
        .bind('click', function () { $(this).toggleClass('clicked'); })
        .bind('mouseout', function () { if
            (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); } })
        .bind('blur', function () { $(this).removeClass('expand clicked'); });
    });