html - CSS 对齐联系表单列

Question

总体上还是 CSS 的新手，我试图将第二个联系表单列与第一个( map )列对齐。

我试过将第一列 float 到左侧，将第二列 float 到右侧，但是第二列不会与第一列并排对齐。

在第二列(联系表)上使用 position: absolute 有效，但它没有响应，所以我正在寻找另一种方法来做到这一点，所以它是响应式的。

我怎样才能使联系表与 map 保持一致并保持响应？

JSFiddle:https://jsfiddle.net/x6zyffx4/

例子:

CSS:

Contact form:

.page-node-28 section.block-system {
float: right;
width: 40%;

/*position: absolute;*/
/*right: 100px;*/
/*top: 110px;*/
/*float:right;*/
/*width: 40%;*/
}


Google maps:

.page-node-28 .block-google-maps {
width: 40%;
min-height: 500px;
float:left;
}

HTML:

第 1 列( map )

<section id="block-block-2" class="block block-block">
<div class="contextual-links-wrapper">
<ul class="contextual-links">
    <li class="block-configure first last">
        <a href="...">Configure block</a>
    </li>
</ul>
</div>
<div class="block-google-maps">
    <iframe src="https://www.google.com/maps/...">
    </iframe>
</div> 
</section> <!-- /.block -->

第 2 栏(联系表)

<section id="block-system-main" class="block block-system clearfix">
<div id="node-28" class="node node-webform">
    <div class="submitted">
    <div class="content">
        <form class="webform-client-form" method="post">
            ...
        </form>
</section>
<!-- /.block -->

更新:

Answer 1

这是我将使用的 css，然后是用于响应的媒体查询

.block-google-maps {
 width: 45%;
 float: left;
 }

.webform-client-form {
 width: 45%;
 float: left;
 }

http://codepen.io/algib/pen/qdMZaz