CSS-div与父div的底部对齐（内联块）

Question

I know this html is sloppy, with some extra divs that are unnecessary, but regardless, I can't understand why the div with ID "info_box_right" is aligning to the bottom of the parent div (you can see the "text" aligned to the bottom at the below jsfiddle example).

Any ideas how I can get it to align to the top of its parent?

http://jsfiddle.net/taddme0y/1/

HTML:

<div id="info_container" >
    <div id="info_box">
        <hr class="info_box_hr" noshade>
            <a id="info_box_title"></a>
        <hr class="info_box_hr" noshade>
        <div id="info_box_wrapper">
            <div id="info_box_left">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_logo">
                        <img class="info_img" id="info_img_logo" alt="logo">
                    </a>
                    <a id="info_box_screenshot">
                        <img class="info_img" id="info_img_screenshot" alt="screenshot">
                    </a>
                </div>
            </div>
            <div id="info_box_right">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_right_text">
                        Text
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

#info_container {
    z-index: 500;
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    height: 0;
    margin: 0 auto;
    background-color: #000000;
}
#info_box {
    z-index: 500;
    position: relative;
    top: 50px;
    width: 100%;
    background-color: #FFFFFF;
    text-align: center;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#info_box_left {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 45%;
    min-width: 100px;
}
#info_box_right {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 45%;
    min-width: 100px;
    /* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#info_box_right_text {
    position: relative;
    color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-style: transparent;
    border-color: #4D4D4D;
    border-width: 2px;
    cursor: pointer;
}
.info_img {
    width: 100px;
    margin: 20px;
    background-color: #000;
}

Answer 1

You can specify how you want an element to vertically align using the vertical-align CSS property.

#info_box_right {
    vertical-align: top;
}

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp