How to display inline divs outside and inside container?

How can I display divs like this? (red line is container)

I've tried making grey containers bigger width (example 1000%) then moving it to left by -950%, but after this I couldn't display divs inline.

Maybe someone has ideas how could I do this?

<div class="container">
<div id="contacts" class="gmlogic-target">
    <div class="contacts-wrap">
        <div class="contacts-left">
            <div class="contacts-text">
                <div class="contacts-text-wrap-left">
                    <h3>Get in touch</h3>
                    <div>
                        <span>Email</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Our address</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Mobile phone</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Call between</span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="contacts-social">
            <a href="http://www.facebook.com"><img alt="facebook" src=""></a>
            <a href="http://www.facebook.com"><img alt="facebook" src=""></a>
        </div>
        <div class="contacts-right">
            <div class="contacts-text">
                <div class="contacts-text-wrap-right">
                    <div>
                        <span>Company name</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Company code</span>
                        <span></span>
                    </div>
                    <div>
                        <span>VAT code</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Address</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Phone</span>
                        <span></span>
                    </div>
                    <div>
                        <span>Email</span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Fiddle