Making an absolute div same top position with another div using jQuery

Question

I need some CSS/jQuery gurus here.

Basically, there are 2 parent divs sitting side by side. First parent div contain a picture and below it contain a table. Second parent div contain only a table with the style position: absolute; .

Now the thing is, the picture is different in height, so that means the position of the table below it gonna change.

Thus, how can I made the table on the 2nd div align the same with the first table, without changing the HTML structure. Is it possible doing it with jQuery, like grabbing the 1st table position, and apply it to the 2nd table?

Basically here's the structure is:

 .picture { background-color: #000; width: 550px; } .second-table { position: absolute; top: 385px; } 

 <div class="div1" style = "width: 30%; display: inline-block;"> <div class="picture" style="height: 378px;"> </div> <table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;"> <tbody><tr class=""> <th>Model</th> <td><p>Legend Diver</p> </td> </tr> <tr class="alt"> <th>Reference</th> <td><p>L3.674.4.50.0</p> </td> </tr> <tr class=""> <th>Gender</th> <td><p>Mens</p> </td> </tr> <tr class="alt"> <th>Case Size</th> <td><p>42.0 mm</p> </td> </tr> <tr class=""> <th>Case Material</th> <td><p>Stainless steel</p> </tr> </tbody></table> </div> <div class="div2" style = "width: 50%; display: inline-block;"> <table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;"> <tbody><tr class=""> <th>Model</th> <td><p>Legend Diver</p> </td> </tr> <tr class="alt"> <th>Reference</th> <td><p>L3.674.4.50.0</p> </td> </tr> <tr class=""> <th>Gender</th> <td><p>Mens</p> </td> </tr> <tr class="alt"> <th>Case Size</th> <td><p>42.0 mm</p> </td> </tr> <tr class=""> <th>Case Material</th> <td><p>Stainless steel</p> </tr> </tbody></table> </div> 

Answer 1

I am not too sure if it is what you are looking for, however I hope it could helps:

 $('.second-table').css('left', 361); 

 .picture { background-color: #000; width: 550px; } .second-table { position: absolute; top: 385px; ---------- } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1" style = "width: 30%; display: inline-block;"> <div class="picture" style="height: 378px;"> </div> <table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;"> <tbody><tr class=""> <th>Model</th> <td><p>Legend Diver</p> </td> </tr> <tr class="alt"> <th>Reference</th> <td><p>L3.674.4.50.0</p> </td> </tr> <tr class=""> <th>Gender</th> <td><p>Mens</p> </td> </tr> <tr class="alt"> <th>Case Size</th> <td><p>42.0 mm</p> </td> </tr> <tr class=""> <th>Case Material</th> <td><p>Stainless steel</p> </tr> </tbody></table> </div> <div class="div2" style = "width: 50%; display: inline-block;"> <table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;"> <tbody><tr class=""> <th>Model</th> <td><p>Legend Diver</p> </td> </tr> <tr class="alt"> <th>Reference</th> <td><p>L3.674.4.50.0</p> </td> </tr> <tr class=""> <th>Gender</th> <td><p>Mens</p> </td> </tr> <tr class="alt"> <th>Case Size</th> <td><p>42.0 mm</p> </td> </tr> <tr class=""> <th>Case Material</th> <td><p>Stainless steel</p> </tr> </tbody></table> </div> 

Answer 2

You could use jquery for this, yes. Something like:

var test = $( ".shop_attributes1" );
var position = test.position();
$('.second-table').css('top', position.top);

Here is a jsfiddle of this: https://jsfiddle.net/7wvjra83/1/

Basically you take the position of the first table and set the css for the second one to be aligned. Hope this works for you