JSFiddle - React, Tailwind, and code Playground
HTML
<div id="parent">
<div id="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus nibh vitae sem <span class ".eula_animate_right">pretium adipiscing</span>. Integer pulvinar semper pellentesque. Fusce varius <span class="eula_animate">turpis in nunc</span> semper sed vestibulum neque accumsan. Curabitur leo lorem, hendrerit et viverra in, iaculis quis enim. Suspendisse potenti. Aliquam erat volutpat. Proin eget est est. Vestibulum porttitor facilisis elit sed mattis. Proin et eros elit. Aenean id fermentum est. Curabitur augue urna, pretium eu varius sed, auctor ut lacus. Fusce luctus <span class="eula_animate">viverra nisl</span>, ac consectetur purus tempus ut.
</p>
</div>
</div>
<DIV class="positionedNode" id="ext-gen108" style="BORDER-TOP: #000000 3pt solid; BORDER-RIGHT: #000000 3pt solid; WIDTH: 135mm; BORDER-BOTTOM: #000000 3pt solid; POSITION: absolute; PADDING-BOTTOM: 0mm; PADDING-TOP: 0mm; PADDING-LEFT: 0mm; LEFT: 25mm; BORDER-LEFT: #000000 3pt solid; TOP: 30mm; PADDING-RIGHT: 0mm; BACKGROUND-COLOR: #ff0000; border-top-left-radius: 0mm 0mm; border-top-right-radius: 0mm 0mm; border-bottom-left-radius: 0mm 0mm; border-bottom-right-radius: 0mm 0mm"><DIV title=TEXTE_MARGE class=SectionNodeHover id=PrjSectionNode_9451_ProjectNode_9450 jQuery17102947171769997773="46">
<DIV lang="FR" style="tab-interval: 1.25cm">
<P class="MsoNormal" id="ext-gen107"><SPAN id="ext-gen103" style="FONT-SIZE: 20pt; COLOR: red">Positionné par rapport à <SPAN style="FONT-WEIGHT: bold">la marge</SPAN></SPAN></P></DIV></DIV></DIV>
<div id="aa"></div>
CSS
.eula_animate{ color:red; }
.move_me{ display:none; position:absolute; color:red; }
#child{
padding-left:100px;
}
#parent{
margin-left:50px;
width:500px;
}
JavaScript
$(document).ready( function(){
$('.eula_animate').each( function(){
$(this)
.clone()
.prependTo(this)
.addClass('move_me')
.css({'left': $(this).offset().left });
});
$('p').hover( function(){
$('.move_me').show().animate({'left':20},2000);
});
$("ext-gen108").click(function(){
alert('');
$("aa").html("ffff");
});
});