JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="sicWrap">
    
    <div class="caption">
         <div class="caption-inner1">
             <div class="caption-inner2">
                 
                 <div class="caption-padding">Caption-padding</div>
                 <div class="showB">Show-me</div>
                 
             </div>
         </div>             
    </div>
        
    <img src="http://lorempixel.com/g/200/350/" alt="" />
        
</div>

CSS

.sicWrap {
    float: left;
    position: relative;
}

.caption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
}

.caption-inner {
    max-height: 100%;
}

.caption-inner1,
.caption-inner2 {
    float: left;
    width: 100%;
}

.caption-inner1 { 
    overflow-x: hidden; 
    overflow-y: auto; 
    max-height: 100%;
    height: 100%;
    float: left;
}

.caption-inner2 { background: red; }

.caption-inner2 {
    float: left;
}

.showB {
    background: green;
}

JavaScript

var sicWrap = $('.sicWrap');

sicWrap.clone().appendTo('body').first('sicWrap').find('.caption-padding').text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus vitae porta posuere, augue nunc feugiat mi, eu luctus magna velit sit amet lectus. Praesent at urna nec velit tincidunt molestie. Ut in mi nec lectus gravida faucibus. Mauris euismod velit eget enim tincidunt sollicitudin. Phasellus vel purus nisi. Fusce tristique mollis lorem, sed eleifend tellus pretium id. In ultricies posuere nulla, non ultricies augue tincidunt sit amet. Nam quis nibh eu purus iaculis convallis. Sed congue vehicula augue quis fermentum. Nam dictum lacus ac nisl imperdiet nec malesuada sapien tincidunt. Integer porta diam in orci mollis consequat. Vestibulum ac suscipit odio. Proin sit amet diam nunc. Nulla facilisi. In elementum placerat tellus, a pellentesque justo dignissim quis.Quisque a felis commodo mauris dictum porta ut et arcu. Sed rhoncus suscipit quam, vel luctus odio iaculis a. Sed cursus nisl in ipsum fringilla sed placerat magna ornare. Donec egestas, sem et consectetur semper, eros dui luctus metus, eu vestibulum est enim at enim. Vestibulum non magna volutpat lectus cursus interdum in id nisl. Etiam aliquet tellus id orci varius ultrices. Fusce odio neque, tincidunt eu rutrum ac, tristique eget massa. Donec ultricies dolor vel sem posuere auctor. Aliquam eleifend venenatis est non faucibus. Mauris rutrum nisi nulla, vitae aliquet metus.');