JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div class="wrap">
    <div class="text">Option 1</div>
    <select>
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
    </select>
</div>

CSS

.wrap {
    display: inline-block;
    padding: .3em .5em;
    background-color: #ccc;
    border: 1px solid #aaa;
    position: relative;
}
.wrap select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

JavaScript

$(function() {
    $('select').change(function(e) {
        var $this = $(this);
        $this.prev().text($this.find('option:selected').text());
    });
});