JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<div class="parent">
  <div class="msg"></div>
  <div class="bg-div"><img src="http://liu.old-pine.net/sites/liujia/files/styles/scale_trim_1140x480/public/default_images/29.jpg?itok=fGXUSdil"/></div>
  <div class="img-div"><img src="http://liu.old-pine.net/sites/liujia/files/default_images/two-people.png"/></div>
</div>

CSS

.parent{
  display:block;
  background-color:red;
}
.bg-div{
  display:block;
  position:absolute;
}
.bg-div img{
  width:100%;
}
.img-div{
  display:block;
}
.img-div img{
  position:absolute;
  left: 40px;
  max-width:250px;
  width: 20vw;
}

JavaScript

//How to Push Parent element to the height of absolute positioned div
function resize_img(){
  var bg_bottom = $(".bg-div").offset().top + $(".bg-div")[0].scrollHeight;
  var img_height = $(".img-div img")[0].scrollHeight 
  $(".img-div img").css("top", bg_bottom-img_height);

}
$(window).on("resize", resize_img );

resize_img();