Two dropdowns side by side inside subheader

I have these filter options in three subheaders and the problem is with the second one with the dropdowns. They are not adjusting according to the device and not looking good. How can I adjust them to do not go outside the screen.

165_8100_ionic-lab

HTML

<ion-header-bar class='bar-subheader' align-title="center">
		<div class="button-bar title">
			<select class="button-subscribe" name="USStates" id="" ng-model="filter.state">
				<option value="" >Select A State</option>
				<option value="{{state}}" ng-repeat="state in USStates">{{state}}</option>
			</select>
			<select class="button-subscribe" name="Specialties" id="" ng-model="filter.specialty">
				<option value="" ng-selected="selected" >Select A Specialty</option>
				<option value="{{specialty}}" ng-repeat="specialty in Specialties">{{specialty}}</option>
			</select>
		</div>
	</ion-header-bar>

CSS

.button-subscribe {
	border-radius: 25px;
    padding: 0 10px;
}

Thanks in advance.

I have solved it using css.

.margin-0 {
	margin: 0 !important;
}

.button-bar select {
	width: 48%;
	max-width: 250px;
}