JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_select" class="styled_select ">
				<select id="list_position" name="" onChange="change()">
                    <option value="-1">No Change</option>
                    <option value="0">On top</option>
                    <option value="list_49">After Movies to Watch</option>
                    <option value="list_50">After Anniversary Party Supplies and MORE!</option>
    </select>
</div>

CSS

.styled_select {
    width:150px;
    height:20px;
	border-radius	: 5px;
	border			: 1px solid #666;
	overflow		: hidden;
	margin-bottom	: 14px;
	position		: relative;
	background		: url('http://www.goodpricescome.com/graphics/downarrow.png') no-repeat right -1px;
	cursor			: pointer;
}

.styled_select select {
/*	padding-right	: 40px;			/* So drop down items with long names don't have text over the down arrow */
	width			: calc(100% + 30px);
}

select {
	background		: transparent;
	font-size		: 13px;
	text-transform	: uppercase;
	font-weight		: bold;
}
select:focus {
	outline			: none;			/* kill the orange outline on select but doesn't work*/
	-webkit-appearance	: none;
}

JavaScript

function change(){
    var d = document.getElementById('list_position');
    document.getElementById("main_select").style.width =    (d.options[d.selectedIndex].text.length*8+40)+"px";
}