Set margins of a div based on another div that in not the parent

Question

JSFIDDLE: http://jsfiddle.net/5nd6bexc/1/

I am trying to position a div (the contact us form) next to the contactus button, that is not the parent. I know how to achieve that if the div is a parent(for instance the contactus is already placed in the page using that)

the best i got is this:

.managed-form {
background-color:#5B8F22;
width: 311px;
height: 369px;
 z-index:99;
  float: right;
  margin: -75% 0% 0% 55%;
  position:absolute;
  display:none;
}

but it's not right because it positioning according to the parent div

HTML CODE

...........
...........
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 top-area">
            <div class="managed-area row">
                <div class="block-wrapper sliderblock">
                    <div class="block">
                        <div class="owl-carousel">
                            <div class="item slide">
                                <img src="/xcf.png" class="slide-image" />
                                <div class="slide-content">
                                     <h2>Slide 1</h2>
                                    <div class="managed-content">
                                        <p>This is slide 1</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item slide">
                                <img src="cfv.png" class="slide-image" />
                                <div class="slide-content">
                                     <h2>Slide 2</h2>
                                    <div class="managed-content">
                                        <p>This is slide 2</p>
                                    </div>
                                </div>
                            </div>
                        </div> <span class="ContactForm" id="ContactForm">CONTACT US &or; </span>

                    </div>
                    <div class="color-stripe color-stripe-2"></div>
                </div>
            </div>
.............
.............
.............
   <div class="managed-form">
            <div class="ContactForm-Heading">Contact Us</div>
            <div class="ContactForm-Subheading">   <div class="managed-form">
            <div class="ContactForm-Heading">Contact Us</div>
            <div class="ContactForm-Subheading"></div>
            <hr />
            <div >
            <hr />
            <div >
           ......
    </div>

Answer 1

Well, if the button has a fixed width and you want the space between the button and the form to be a fixed width, you just add them. The example code below would leave a 100px space between the 2 elements.

.button: {
  position: absolute;
  right: 0;
  width: 20px;
}
.form {
  position: absolute;
  right: 120px;
}

On the other hand, if you want the space between the button and the form to be a percentage, you should do the following:

.button: {
  position: absolute;
  right: 0;
  width: 20px;
}
.form {
  margin-right: 20%;
  position: absolute;
  right: 20px;
}