Inline-Block Div Alignment with Inline Content

An attempt to understand why the second of two inline-block divs draws without respect to the containing div, and instead aligns based on the inline content inside of it.

HTML

<body>
	<header>
		<div id="titlebar">
			<div id="titlename">
				<h1>Title Name Here</h1>
			</div>
			<div id="titlemenu">
				<span>Item One</span><span>Item two</span>
			</div>
		</div>
	</header>
</body>
</html>

CSS

header {
			width: 100%;
			height: 800px;
			background-color: gray;
		}
		#titlebar {
			width: 100%;
			height: 200px;
			background-color: black;
		}
		#titlename {
			width: 49.5%;
			height: 100%;
			background-color: white;
			opacity: 0.90;
			display: inline-block;
		}
		#titlemenu {
			width: 49.5%;
			height: 100%;
			background-color: blue;
			opacity 0.90;
			display: inline-block;
    vertical-align: bottom;
		}