css - Align 2 sections next to each other in responsive -

i want align 2 sections next each other. 1 has text(heading) , text changing in length. 1 more section has image.

my issue when make screen size smaller, second section coming down.

tried display:table-row; display:table; display:table-cell; nothing helps. second div still comes down.

please help.

-thanks in advance.

this 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; } 

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 per 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>