html - CSS Aligning contact form columns -

still new css in general, trying align second contact form column first 1 (maps).

i've tried floating first left , second right, second column not line side side first column.

using position: absolute on second column (contact form) works it's not responsive looking way it's responsive.

how can align contact form maps , have still responsive?

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

example:

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:

column1 (maps)

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

column 2 (contact form)

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

update:

this css use followed media queries responsiveness

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

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