JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="box">
    <span class="search">All Departments</span>
    <select class="select">
        <option selected="selected" value="search-alias=aps">All Departments</option>
        <option value="search-alias=instant-video">Amazon Instant Video</option>
        <option value="search-alias=appliances">Appliances</option>
        <option value="search-alias=mobile-apps">Apps &amp; Games</option>
        <option value="search-alias=arts-crafts">Arts, Crafts &amp; Sewing</option>
        <option value="search-alias=automotive">Automotive</option>
        <option value="search-alias=baby-products">Baby</option>
        <option value="search-alias=beauty">Beauty</option>
        <option value="search-alias=stripbooks">Books</option>
        <option value="search-alias=popular">CDs &amp; Vinyl</option>
        <option value="search-alias=mobile">Cell Phones &amp; Accessories</option>
        <option value="search-alias=fashion">Clothing, Shoes &amp; Jewelry</option>
        <option value="search-alias=fashion-womens">&nbsp;&nbsp;&nbsp;Women</option>
        <option value="search-alias=fashion-mens">&nbsp;&nbsp;&nbsp;Men</option>
        <option value="search-alias=fashion-girls">&nbsp;&nbsp;&nbsp;Girls</option>
        <option value="search-alias=fashion-boys">&nbsp;&nbsp;&nbsp;Boys</option>
        <option value="search-alias=fashion-baby">&nbsp;&nbsp;&nbsp;Baby</option>
        <option value="search-alias=collectibles">Collectibles &amp; Fine Art</option>
        <option value="search-alias=computers">Computers</option>
        <option value="search-alias=financial">Credit and Payment Cards</option>
        <option value="search-alias=digital-music">Digital Music</option>
        <option value="search-alias=electronics">Electronics</option>
        <option value="search-alias=gift-cards">Gift Cards</option>
        <option value="search-alias=grocery">Grocery &amp; Gourmet Food</option>
        <option value="search-alias=hpc">Health &amp; Personal...

CSS

.select {
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: visible;
    position: absolute;
    left: 0; top: 0;
    height: 30px;
    cursor: pointer;
}

.box {position: relative; }

.search {
    background: #ccc;
    display: inline-block;
    height: 30px;
    font-family: Arial;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 2px;
    cursor: pointer;
}

JavaScript

var select = $('.select');
	var search = $('.search');

	var wi = search.innerWidth();
   select.width(wi);

$('.select').change(function(){

    var name = $('.select :selected').text();
    search.text(name);
    var wi = search.innerWidth();
   	select.width(wi);
});