Make div stick to non-child div with JQuery

Question

So I'm trying to make a double slider in Owl-Carousel 2.0, The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2). I tried using JQuery to do this, with the following line of code:

$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");

However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().

How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?

See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW

Answer 1

I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ