JSFiddle - React, Tailwind, and code Playground
HTML
<div class="combo">
<span class="flag-it"></span>
<select>
<option value="Italiano" selected>Italiano</option>
<option value="English">English</option>
<option value="Français">Français</option>
<option value="Español">Español</option>
<option value="Nederlands">Nederlands</option>
</select>
</div>
CSS
body {background: palegoldenrod;}
.combo {
background: silver;
margin: 10px 0;
position: relative;
}
.combo span {
// display: block; float: left;
width: 16px; height: 11px;
// margin-right: 10px;
background: white url('flags.png') no-repeat;
// line-height: 1;
position: absolute;
top: 50%;
margin-top: -5.5px;
}
.combo select {
// vertical-align:middle;
// line-height: 1;
margin-left: 26px; // 16px + 10px
}
.combo span.flag-es {background-position: -16px 0}
.combo span.flag-fr {background-position: -32px 0}
.combo span.flag-gb {background-position: 0 -11px}
.combo span.flag-it {background-position: -16px -11px}
.combo span.flag-nl {background-position: -32px -11px}