JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
        font-size: 0;
        
    }
    .square {
        position: relative;
        display: inline-block;
        width: 100px;
        margin: 0 5px; 
    }
    .square_noImg {
        padding-bottom: 100px;
        background: red;
    }
    .square_img {
    
        background: blue;
        
    }
    img{
        width: 100%;
        height: auto;
        border: 0;
        visibility: hidden;
    }
    .inner {
        position: absolute;
        top: 10%;
        right: 10%;
        bottom: 10%;
        left: 10%;
        background: white;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        padding: 10px 5px;
    }

JavaScript

var squares = document.getElementsByClassName('square');

var interval = window.setInterval(function(){
    for (i = 0; i < squares.length; i++) {
        if (squares[i].offsetWidth < 200)
        squares[i].style.width = squares[i].offsetWidth + 100 + 'px';
        else 
        squares[i].style.width = squares[i].offsetWidth - 100 + 'px';
    }
},1000);