In the quest for aligning content vertically between two divs, I have encountered a challenge. Despite my efforts to adjust offsets and heights, the new element in the second div still does not align perfectly with the first one. This is evident in the code snippet provided below.
The discrepancy lies in understanding why there is a difference between tag_offset.top and test_tip.offset().top, even though they are explicitly set to be equal during the instantiation of test_tip.
var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset['left'] = 0;
var tag_text = $('.jt-tooltip-text').text();
var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');.middlebar {
width: 49%;
float: left;
}
.sidebar {
height: 500px;
width: 49%;
float: right;
border: 1px solid purple;
}
.jt-tooltip-tag {
font-weight: bold;
background-color: #14c9c9;
}
.jt-tooltip-text {
display: none;
}
.jt-sidebar-tip {
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<h1 class="header">
Omigosh a header!
</h1>
<div class="content">
<div class="middlebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
</div>
<div class="sidebar" id="jt-tooltip-sidebar">
</div>
</div>
</div>