JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>full width select</h1>
	</div><!-- /header -->

	<div data-role="content">	

        <!-- regular select menu in content section -->
		<div data-role="controlgroup" data-type="horizontal" >
			<button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext">Prev</button>
			<button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</button>
			<select id="cSelect">
      <option value=""></option>
				<option value="1">content select menu (native)</option>
				<option value="2">option 2</option>
			</select>
		</div>

        <!-- custom select menu in content section -->
		<div data-role="controlgroup" data-type="horizontal">
			<button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext">Prev</button>
			<button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</button>
			<select id="cSelectCustom" data-native-menu="false">
				<option value="1">content select menu (custom)</option>
				<option value="2">option 2</option>
			</select>
		</div>

	</div> <!-- /content -->

	<div data-role="footer" data-position="fixed"  data-theme="b">

        <!-- regular select menu in footer section -->
		<div data-role="controlgroup" data-type="horizontal">
			<button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext">Prev</button>
			<button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</button>
			<select id="fSelect">
				<option value="1">footer select menu</option>
				<option value="2">option 2</option>
			</select>
		</div>

	</div><!-- /footer -->

</div><!-- /page -->

CSS

div[data-role="footer"] [data-role="controlgroup"] {
	margin: 0px;
}

div[data-role="footer"] [data-role="controlgroup"] button {
	padding: 0.7em !important;
}

JavaScript

// for regular pages
$(document).ready(function() {

	$(window).bind('resize', function (event) {
		fullwidth();
	}).trigger('resize');		

});
                  
function fullwidth(select) {
	var select = select || $("select"); // either a specific one or all selects
	select.each(function() {
		var select = $(this);
		var cWidth = 0;
		select.closest(".ui-controlgroup-controls").children().not(".ui-select").each(function() { 
			cWidth += $(this).outerWidth();
			$(this).outerHeight( select.closest(".ui-select").height() +0.5 );
		});
		select.closest(".ui-select").find(".ui-btn").outerWidth( select.closest("[data-role='controlgroup']").width() - cWidth -1); 
	});
}