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;
    vertical-align: bottom;
}
#titlemenu {
    width: 49.5%;
    height: 100%;
    background-color: blue;
    opacity 0.90;
    display: inline-block;
}