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">
        <h1>header</h1>
    </div>
    
    <div data-role="footer" data-position="fixed">
    <!-- ----------------- -->
        <div data-role="controlgroup" data-type="horizontal" id="footerControlgroup" >
			<button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext ui-mini">Prev</button>
			<button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext ui-mini">Next</button>
            <label for="select">Select:</label>
            <div>test</div>
			<select id="select" data-mini="true">
				<option>pick me...</option>
			</select>
		</div>
    <!-- ----------------- -->
    </div>
</div>

CSS

#footerControlgroup {
	padding-left: 1px;
	margin: 0px;
}

#footerControlgroup .ui-btn-icon-notext {
	height: 34px;
	padding: 0 5px;
}