How to prevent CSS block elements from affecting parent inline-blocks - html

Question

I am having an issue with elements inside an inline-block parent. The child elements of one are affecting the other. It is tough to explain but it is easy to see in my fiddle, that the div on the right is being pushed down.
I have tried various things, but I am sure there is a simple solution. Any advice is appreciated.
http://jsfiddle.net/62asy/
HTML:
<div id="schedule">
<div class="scheduleChoice">Leagues
<select name="leagueList" id="leagueList" class="scheduleChoiceList">
<option value="0">Select a League</option>
<option value="leagueId_246"> Aassss</option>
<option value="leagueId_245"> aaa</option>
</select>
<select name="teamList" id="teamList" class="scheduleChoiceList">
</select>
<div class="scheduleChoiceSubmit">Submit</div>
</div>
<div class="scheduleChoice">Arena
<select name="arenaList" id="arenaList" class="scheduleChoiceList">
<option value="0">Select an Arena</option>
<option value="arenaId_2"> ffffff</option>
<option value="arenaId_1"> ffffff</option>
</select>
<div class="scheduleChoiceSubmit">Submit</div>
</div>
</div>
CSS:
#schedule {
background-color: rgba(0, 0, 0, 0.44);
overflow: hidden;
text-align: center;
}
.scheduleChoice {
display: inline-block;
width: 25%;
background-color: rgba(190, 216, 255, 0.54);
height: 200px;
padding: 5px;
border-radius: 5px;
margin: 20px 25px;
}
.scheduleChoiceList {
width: 200px;
padding: 5px;
border-radius: 4px;
display: block;
margin: 10px auto;
}

Answer 1

Add vertical align top
.scheduleChoice {
vertical-align: top;
}
Edited fiddle
http://jsfiddle.net/62asy/1/