JSFiddle - React, Tailwind, and code Playground

HTML

<section id="search">
    <header>
        	<h2>Búsqueda de propiedades</h2>
    </header>
    <div>
        <form name="buscar_propiedad" id="buscar_propiedad">
            <div>
                <div class="icon icon-airplane"></div>
                <label class="overlabel">
                    <span>Lugar</span>
                    <div class="fakeinput"></div>
                    <select name="lugar" required="required">
                        <option value="2">Deià</option>
                        <option value="3">Valldemossa</option>
                        <option value="4">Soller</option>
                    </select>
                </label>
            </div>
            <div>
                <div class="icon icon-forward"></div>
                <label class="overlabel">
                    <span>Tipo de propiedad</span>
                    <div class="fakeinput"></div>
                    <select name="tipo" required="required">
                        <option value="1">Villa</option>
                        <option value="2">Finca Rústica</option>
                        <option value="3">Apartamento</option>
                        <option value="4">Casa adosada</option>
                        <option value="5">Solar</option>
                        <option value="6">Palacio</option>
                        <option value="7">Hotel</option>
                    </select>
                </label>
            </div>
            <div>
                <div class="icon icon-heart"></div>
                <label class="half overlabel">
                    <span>Min.</span>
                    <input type="text" name="minimo" required="required" />
                </label>
                <label class="half overlabel">
                    <span>Máx.</span>
                    <input type="text" name="maximo" required="required" />
                </label>
            </div>
            <div>
                <div class="icon icon-cart"></div>
               ...

CSS

section#search {
    padding: 25px 1%;
    overflow: hidden;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #b1becc));
    background-image: -webkit-linear-gradient(#ffffff, #b1becc);
    background-image: -moz-linear-gradient(#ffffff, #b1becc);
    background-image: -o-linear-gradient(#ffffff, #b1becc);
    background-image: linear-gradient(#ffffff, #b1becc);
}
/* line 6, ../sass/_search.scss */
 section#search > header h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}
/* line 15, ../sass/_search.scss */
 section#search > div > form > div {
    position: relative;
    padding-left: 35px;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}
/* line 22, ../sass/_search.scss */
 section#search > div > form label {
    display: block;
}
/* line 24, ../sass/_search.scss */
 section#search > div > form label.half {
    float: left;
    margin-right: 1%;
    width: 49.5%;
}
/* line 28, ../sass/_search.scss */
 section#search > div > form label.half:last-child {
    margin-right: 0;
}
/* line 38, ../sass/_search.scss */
 section#search > div > form label.overlabel {
    position: relative;
}
/* line 40, ../sass/_search.scss */
 section#search > div > form label.overlabel span {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #d4cfcc;
    text-transform: uppercase;
}
/* line 49, ../sass/_search.scss */
 section#search > div > form .icon {
    float: left;
    background-color: f1ece2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    left: 0;
}
/* line 57, ../sass/_search.scss */
 section#search > div > form select {
    display: none;
}
/* line 60, ../sass/_search.scss */
 section#search > div > form .fakeinput, section#search > div > form input[type=text] {
    background: white;
    padding: 10px 0px;
   ...

JavaScript

$(function () {
    $('body').on('click', 'form > div', function (e) {
        var self = $(this),
            options = self.find('select option'),
            div = $('<div />'),
            select = div.clone().addClass('pop-up-selector');
        $('.pop-up-selector').remove();
        options.each(function (i, elem) {
            var opt = $(elem);
            select.append(div.clone().data('value', opt.val()).text(opt.text()));
        });
        console.log(true);
        select.appendTo(self);
    });
    $('body').on('click', '.pop-up-selector > div', function (e) {
        var self = $(this),
            val = self.data('value'),
            text = self.text(),
            overlabel = self.parent().siblings('.overlabel');
        // display to user and store value for later
        overlabel.find('.fakeinput').data('value', val).text(text);
        // select corresponding option in select element in case you're using that later
        overlabel.find('select option').each(function (i, elem) {
            var opt = $(elem),
                selected = opt.val() === val;
            opt.attr('selected', selected);
        });
        window.setTimeout(function () {
            $('.pop-up-selector').remove();
        }, 0);
    });
});