Centering two elements responsively with definite gap

For a particular layout that I am creating, I am required to center two elements horizontally in a div as though they were a single element as shown in this image.

http://ift.tt/1dq03Q0

Between these two, I also need to have a gap (as shown above) that remains definite even the the browser window width changes.

What would be the best way to do this with css?

I tried doing this floats inside the div but could not get the gap between the elements to be the same responsively.

I have also done some research online but in vain.

Any help would be appreciated.