JSFiddle - React, Tailwind, and code Playground

HTML

<div class="better-wrapper-than-lil-wayne">
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <div class="clear"></div>
</div>

<p class="ul-height">UL height: <span>24</span>px</p>

CSS

* { margin: 0; padding: 0; outline: 0; }
.better-wrapper-than-lil-wayne { height: 24px; padding: 3px; border: 3px dashed #dd0000; overflow: hidden; }
select { width: 200px; height: 24px; float: left; }
ul { float: right; width: 200px; list-style: none; height: 24px; overflow: hidden; cursor: pointer; }
ul.exp { height: 72px; }
ul li { background: #bada55; color: white; padding: 0 10px; line-height: 24px; height: 24px; }
.clear { height: 0; clear: both; }
.ul-height { padding: 5px; }

JavaScript

$('ul').click(function() {
    $(this).toggleClass('exp');
    var ulH = parseInt($('ul:eq(0)').height());
    $('.ul-height span').text(ulH);
});