title: How to make two Div fixed with respect toeach other?
body: <p>I have a Div below which is a button and as my screensize changes height of the Div changes due to which the button changes its position sometimes it hides behind the Div as I have provided z-index. How can I make position of the button fixed with respect to the Div even when the screensize changes?</p>
  
  <p>Here is my HTML code:--</p>
  
  <pre><code>&lt;div class="row" id="event"&gt;
            &lt;div class="col-lg-1 col-md-1 col-xs-1"&gt;&lt;/div&gt;
            &lt;div class="col-lg-10  col-md-10  col-xs-10 "&gt;
              &lt;section *ngFor="let event of events; let i = index" [style.backgroundColor] = "colorsArray[i]" class="eventSectionCSS"&gt;
                &lt;legend class="legendCSS"&gt; {{event.title}}&lt;/legend&gt;
  &lt;br&gt;
  
                  &lt;div class="row" style="margin-left: 15px;" &gt;
                  &lt;div class="col-lg-6 col-md-6 col-xs-6" style="display: inherit;" &gt;
  
                    &lt;div class="row" &gt;
                      &lt;div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"&gt;
                        &lt;h2 class="presenterNameCSS" &gt;{{ event.SMEPresentedByFirstName | uppercase}} &lt;/h2&gt;
                      &lt;/div&gt;
  
                       &lt;div class="col-md-6 col-lg-6 col-sm-6 col-xs-6" style="margin-left: -10px;" &gt;
                         &lt;h2 class="presenterNameCSS" &gt; {{ event.SMEPresentedByLastName | uppercase}} &lt;/h2&gt;
                      &lt;/div&gt;
  
                    &lt;/div&gt;
  
                  &lt;/div&gt;
               &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" &gt;&lt;/div&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="image__event_both" &gt;
                    &lt;div class="col-lg-6 col-md-6 col-xs-6"&gt;
                                        &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
                      &lt;div class="flipper"&gt;
                        &lt;div class="front"&gt;
                            &lt;img id="image__1" (click) = "clickToShare()" src="../assets/img/Fwd Icons/share.png" &gt;
                        &lt;/div&gt;
                        &lt;div class="back"&gt;
                                      &lt;div class="row" &gt;
                                &lt;section class="widget sharing_events_widget"&gt;
                                      &lt;share-buttons  (click) = "closeShareIt(i)" [url]="'http://mentoriaweb.azurewebsites.net/#/app/Login'"
                                          [count]="false"
                                          [totalCount]="true"
                                          [defaultStyle]= "true"
                                          (popUpClosed) = "true"
                                          [google]="googleInner"
                                          [pinterest]="false"
                                          [linkedIn]="false"
                                          [tumblr]="tumblrInner"
                                          [reddit]="false"
                                          [stumbleUpOn]="false"&gt;
                                    &lt;/share-buttons&gt;                
                                &lt;/section&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt; 
                    &lt;/div&gt;
                    &lt;div class="col-lg-6 col-md-6 col-xs-6"&gt;
                       &lt;img id="image__2" (click) = "notifyMe(event.uid)" src="../assets/img/Fwd Icons/notify.png" &gt; 
                    &lt;/div&gt;                           
                  &lt;/div&gt;               
                &lt;/div&gt;
  &lt;br&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 presenterImageDivCSS "  &gt;
                    &lt;img style="margin-left: 31px;" src="assets/img/avatar.png"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"&gt;
                    &lt;p class="smeSnippetCSS" &gt; {{event.snippet}} &lt;/p&gt;
                     &lt;a style="color:#fff;" &gt;...Read more&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 dashed_height"style=""&gt;
                    &lt;div class="date1" &gt;{{event.eventDate*1000 | date:'dd'}}&lt;/div&gt;
                    &lt;div class="date2"&gt;&lt;b&gt;{{event.eventDate*1000 | date:'MMM' | uppercase}}&lt;/b&gt; &lt;br&gt;
                      &lt;p class="date3"&gt;{{event.eventDate*1000 | date:'yyyy'}}&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="date4"&gt; &lt;b&gt;{{ event.eventDate | date:'hh:mm a'}}&lt;/b&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;br&gt;
              &lt;/section&gt;
              &lt;div&gt;
  
  
               &lt;button class="btn btn-primary width-100 mb-xs" id="sme_register" role="button" &gt;&lt;span class="sme_buttonn"&gt;&lt;b&gt; Register&lt;/b&gt;&lt;/span&gt; &lt;/button&gt;
              &lt;/div&gt;
  
  
            &lt;/div&gt;
            &lt;div class="col-md-1 col-lg-1 col-xs-1"&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>