How to vertical-align:bottom 2 floated divs with text

Question

I have issue with css. I've created this jsfiddle to show it - https://jsfiddle.net/5k92h026/19/

My code is:

.left {float:left}
.wrapper{width:690px;}
.first-div {background-color:red;width:334px;height:84px;}
.second-div {
    background-color:blue;
    width:300px;
    height:84px;
    padding:33px 20px 35px 23px;
}
#first-link {
    padding-right:10px;
    display:block;
    float:left;
    vertical-align:bottom;
}
#second-link {
    padding-left:10px;
    display:block;
    float:left;
    border-left: 1px solid black;
    width:50%;
}

<div class="wrapper">
    <div class="left first-div">some info</div>
    <div class="left second-div" style=" display:inline-block;">
            <div class="search-info"></div>
            <a id="first-link" href="">some text here</a>
            <a id="second-link" href="" class="">some text that goes in 2 rows here</a>
    </div>
</div>

I want in blue div first link which text is "some text here" to be vertical-align:bottom, so that it will be positioned as second link. There is no problem when two links are in one line but when second text is longer, it goes on new line and they are not positioned good. How to do that? Thanks.

Answer 1

You can use display:inline-block; instead of float:left; and the give vertical-align: bottom; to #second-link and #first-link. Don't forget to remove the extra spaces which is occurred by display:inline-block;

Jsfiddle