Image 将两个相邻的部分对齐，以响应

我想对齐两个相邻的部分。一个有文本（标题），文本的长度将发生变化。还有一个部分有一个图像

我的问题是当我缩小屏幕尺寸时，第二部分就要下来了

尝试显示：表格行；显示：表格；显示：表格单元格；没什么帮助。第二节还没结束

请帮忙

-提前谢谢

这是我的代码： HTML

对于静态文本： 尝试：

HTML:

HTML:

HellodFGSDFGSDFGHSDFHSDFHDSFHDFHDSFSDFHSDHH

对于静态文本： 尝试：

HTML:

HTML:

HellodFGSDFGSDFGHSDFHSDFHDSFHDFHDSFSDFHSDHH

您是否尝试过显示：内联块并将宽度：49%赋予两者？我无法指定宽度，因为标题文本每次都在更改。示例：当出现洪水警告时，您可以在%中指定宽度，这将解决此问题。您是否尝试显示：内联块并将宽度：49%指定给两者？我无法指定宽度，因为标题文本每次都在更改。示例：当洪水警告出现时，您可以在%中指定宽度，这将解决问题。它不起作用！！标题文本每次都在更改。如果文本很小，如“在”有太多的灰色空间遗漏，如果文本很长，如“当有洪水警告时”，文本将分为两行！！请帮忙。需要在一个小时内送达！！嘿，谢谢，这很有帮助。但这幅图像是正确的。怎么办？根据需要修改img的最大宽度。或者只对图像容器进行填充。如果它对你有效，你可以接受它作为答案，然后非常感谢你。成功了。你救了我一天：）它不起作用！！标题文本每次都在更改。如果文本很小，如“在”有太多的灰色空间遗漏，如果文本很长，如“当有洪水警告时”，文本将分为两行！！请帮忙。需要在一个小时内送达！！嘿，谢谢，这很有帮助。但这幅图像是正确的。怎么办？根据需要修改img的最大宽度。或者只对图像容器进行填充。如果它对你有效，你可以接受它作为答案，然后非常感谢你。成功了。你救了我一天：）

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

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

div{display:inline-block;width:49%;vertical-align:top;}
div img{max-width:100%}

<div>Text</div>
<div><img src="src" /></div>

.table{display:table;}
.table div{display:table-cell;vertical-align:top;}
.table div img{max-width:100%}

<div class="table">
        <div>Hellodfgsdfgsdfghsdfhsdfhdsfhdfhdsfhsdfhsdh</div>
        <div>
            <img src="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" />
        </div>
    </div>