Align 2 sections next to each other in responsive - image

Question

I want to align 2 sections next to each other. One has text(heading) and the text will be changing in length. one more section has a image.
My issue is when i make the screen size smaller, the second section is coming down.
Tried display:table-row; display:table; display:table-cell; nothing helps. the second div still comes down.
Please Help.
-Thanks in advance.
This is my code:
HTML
<h2><span>BE PREPARED PREPARED</span><img src="http://localhost/safesteps/wp-content/uploads/2014/04/before_bg_r.png" alt="before_bg_r"/></h2>
CSS
.inner_berfore h2{
display:table-row;
border-top: 4px solid #767676;
position: relative;
float:left;
width:98%;
}
.inner_berfore h2 span{
background:#767676;
display:table-cell;
font-family: 'arial-black';
text-transform:uppercase;
padding-left:16px;
font-size:22px;
line-height:40px;
color:#FFF;
float:left;
}
.inner_berfore h2 img{
display:table-cell;
float:left;
height:40px;
}

Answer 1

For static Text:
Try : http://jsfiddle.net/lotusgodkk/anK6u/6/
div{display:inline-block;width:49%;vertical-align:top;}
div img{max-width:100%}
HTML:
<div>Text</div>
<div><img src="src" /></div>
you can assign different width as per your design
For dynamic text:
http://jsfiddle.net/lotusgodkk/anK6u/8/
CSS:
.table{display:table;}
.table div{display:table-cell;vertical-align:top;}
.table div img{max-width:100%}
HTML:
<div class="table">
<div>Hellodfgsdfgsdfghsdfhsdfhdsfhdfhdsfhsdfhsdh</div>
<div>
<img src="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" />
</div>
</div>