JSFiddle - React, Tailwind, and code Playground

by koutsenko

HTML

<div class="table">
    <div class="column-img"><img  src="data:image/gif;base64,R0lGODdhAQAKAIAAAAAAAP///ywAAAAAAQAKAAACA4SPBQA7"/></div>
    <div class="column">Content DIV, here will be tables and some another content</div>
</div>

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
}
.table {height: 100%; width:100%; display:table;}
.column {
    height: 100%;
    display: table-cell;
    border: 1px solid green;
    vertical-align: top;
}

.column-img {
    display: table-cell;
    height: 100%;
    background: red; /* for debugging */
}

img {
    display: block;
    height: 100%;
}

JavaScript

window.onload = window.onresize = function() {
    this.timeout && clearTimeout(this.timeout);
    this.timeout = setTimeout(function() {
        var image =  document.getElementsByTagName('img')[0];
    
        document.documentElement.style.fontSize = image.offsetHeight + '%';   
    }, 10);
    
}