JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div id="container">
  <div id="container2">
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
  </div>
</div>

CSS

#container {
  position:relative;
    background-color: silver;
    display:  block;
    height: 0;
    padding-bottom: 50%;
    width: 50%;
    margin:0 auto; 
    overflow: hidden;
}

#container2 { 
position:absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -17px; 
    overflow: auto;
}

JavaScript

var con1 =$('#container').height();

$(document).on('load', 'ready', 'resize' , function(){

alert(con1);
})