JSFiddle - React, Tailwind, and code Playground

HTML

<div class="state_box">
    <input type="checkbox" id="state-tgl" onblur="closeMenu(this)">
    <label id="state-tgl-label" for="state-tgl">	<span class="collapse_tiny">Choose a state</span>

        <img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
    </label>
    <ul id="state_drop-menu">
        <li><a href="http://www.pia.org/CT"><span class="collapse_tiny">Connecticut</span></a>
        </li>
        <li><a href="http://www.pia.org/NH"><span class="collapse_tiny">New Hampshire</span></a>
        </li>
        <li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">New Jersey</span></a>
        </li>
        <li><a href="http://www.pia.org/NY"><span class="collapse_tiny">New York</span></a>
        </li>
    </ul>
</div>
<br>
<br>
<br>
<div class="carrier_box">
    <input type="checkbox" id="carrier-tgl" onblur="closeMenu(this)">
    <label id="carrier-tgl-label" for="carrier-tgl">	<span class="collapse_tiny">Select a carrier</span>
	<span class="collapse expand_tiny inline">State</span>

        <img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
    </label>
    <ul id="carrier_drop-menu">
        <li><a href="http://www.pia.org/CT"><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span></a>
        </li>
        <li><a href="http://www.pia.org/NH"><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span></a>
        </li>
        <li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span></a>
        </li>
        <li><a href="http://www.pia.org/NY"><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span></a>
        </li>
    </ul>
</div>
        <br><br>
 <div style="background-color:red; width:100px; height:100px;">
        </div>

CSS

.state_box {
    margin-bottom:-9px;
    width:320px;
}

#state-tgl-label {
    padding-left:10px;
    padding-right:10px;
    padding-bottom:7px;
    padding-top:15px;
    background-color:rgba(6, 0, 0, 0.09);
}

.state_box ul {
    margin:0;
    padding:0;
    list-style-type: none;
}
.state_box ul li {
    display:inline;
}
.state_box ul ul {
    display:inline;
}
.state_box ul li a {
    text-decoration:none;
    padding-left:16px;
    color:#000;
    font-family:'Raleway', Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:23px;
    font-size:2.3rem;
    text-transform:uppercase;
    vertical-align:-8px;
    color:#939598;
}
.state_box ul li a.first_state {
    padding-left:0px;
}
.state_box ul li .third_level {
    color:#a7a9ac;
    font-size:18px;
    font-size:1.8rem;
    vertical-align:-5px;
}
.state_box ul li .fourth_level {
    color:#BCBEC0;
    font-size:14px;
    font-size:1.4rem;
    vertical-align:-3px;
}
.state_box ul li a:hover {
    color:#808285;
}
.state_box ul li .selected_state {
    font-size:36px;
    font-size:3.6rem color:#000000;
    text-transform:uppercase;
    vertical-align:text-top;
    color:#000;
    font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#state-tgl {
    position:absolute;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* Real Browsers */
    opacity:0;
}
#state-tgl-label {
    font-size:28px;
    font-size:1.8rem;
    color:#000000;
    font-family:'Raleway', Arial, Helvetica, sans-serif;
    /*font-weight:500;*/
    display:block;
}
#state-tgl-label img {
    float:right;
    margin-top:5px;
}
#state_drop-menu {
    position:relative;
    z-index:9999;
    background-color:rgba(6, 0, 0, 0.09);
    /*border:solid 2px black;*/
    width:200px;
    padding-top:8px;
    padding-bottom:8px;
    display:none;
    max-height:0px;
    transition: max-height 0.25s ease;
    margin-top:10px;
}
#state_drop-menu li {
    display:block;
    padding:0px;
   ...