CSS with Image Div and Text Div for the same baseline

Question

I'd like to place a Div for image and a Div for text at the same baseline. Below is my sample code and JSFiddle.

http://jsfiddle.net/xLrf7pyt/

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

<style>
    .wrap { width: 500px;}
    .img { float: left; }
    .txt { }
</style>

============ Update ================

Originally, there should be some empty space between image (logo at left-top corner) and text (navigation at right-top) with same baseline with image logo.

Answer 1

Drop the float from your .img element and instead set both .img and .txt to display: inline:

.img, .txt { 
    display: inline;
}

Then set .txt to have a vertical-align of baseline:

.txt {
    vertical-align: baseline;
}

JSFiddle demo.