JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="https://cdn.rawgit.com/sdecima/javascript-detect-element-resize/master/detect-element-resize.js"></script>
<div class="wrapper">
    <div class="column">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed turpis id ex varius cursus. Quisque ornare, lacus vel rhoncus lacinia, tortor augue rutrum sem, vel dapibus velit diam non neque. Nullam id rhoncus libero. Donec pharetra diam nisl, posuere
            tristique turpis tempus ut. Cras fringilla ante pulvinar ex mattis vestibulum. Suspendisse blandit ornare nisl in laoreet. Maecenas eleifend quis lorem in fringilla. Duis mattis condimentum vehicula. Proin in tellus turpis. Integer ac ligula
            porta, consequat turpis sed, varius sapien. Duis consectetur porta imperdiet. Suspendisse ac purus tincidunt, tincidunt sapien id, volutpat nibh. Curabitur id diam nulla.
        </p>
        <p>
            Duis sollicitudin lobortis lacus, et vestibulum augue. Donec laoreet, enim eget mattis porttitor, erat dui ultrices leo, viverra consectetur ante nisi ut magna. Suspendisse iaculis ullamcorper faucibus. Suspendisse eu elementum neque, in lacinia dui.
            Nullam tempus ultricies sapien ullamcorper feugiat. Etiam sem nisl, porttitor a velit id, iaculis efficitur diam. Praesent laoreet egestas ullamcorper. Ut ut tortor venenatis enim mollis pellentesque ut id lacus. Quisque eu rhoncus velit,
            mollis condimentum lacus. Cras viverra ex vitae mollis vehicula. Aliquam erat volutpat. Maecenas id aliquet ex. Nam congue aliquet maximus. Mauris magna sem, accumsan quis rutrum vel, sodales eget mi.
        </p>
        <p>
            Ut erat augue, elementum eget ornare commodo, pharetra et purus. Donec sagittis non lectus et tempus. Sed id dolor eu nibh imperdiet semper in eu metus. Donec convallis scelerisque maximus. Suspendisse ultrices purus nisl, ac dapibus diam fermentum et.
            Ut vitae eros tristique, dictum justo eget, tincidunt mi....

CSS

.wrapper {
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.column {
    position: relative;
    width: 50%;
    float: left;
}

.stick_bottoms {
    position: fixed;
    bottom: 0;
}

JavaScript

var resizeElement = document.querySelectorAll('.column');
 console.log(document.querySelectorAll('.column'));

 var biggest = 0;
 [].forEach.call(resizeElement, function(item) {
     resizeCallback = function() {

         /* do something */
         console.log('resized');

         console.log(item.offsetHeight, 'column');
         console.log(item.offsetWidth, 'column');

         var height = window.getComputedStyle(item, null).height;
         var heightRound = Math.round(height.replace('px', ''));

         if (heightRound >= biggest) {
             biggest = heightRound;
         }
         console.log(biggest, 'biggest');

         if (item.querySelector('.stick_bottoms')) {
             var a = item.offsetWidth;
             item.querySelector('.stick_bottoms').style.width = a + 'px';
         }
     };

     addResizeListener(item, resizeCallback);
 });