JSFiddle - React, Tailwind, and code Playground

HTML

<body class="body" onload="manageResizing();" onresize="manageResizing();">
    <div class="container">
        <div id="moreSpace" class="moreSpaceHor">
            <div style="position:fixed; top:0px; color:white;">PIOTR</div>
            <img class="imgHor" id="imgResizer" src="https://fbcdn-photos-h-a.akamaihd.net/hphotos-ak-prn2/v/t34.0-11/10255244_10200781848868637_1997052883_a.jpg?oh=21c5cba3250ac32f9c90d07603a142c1&oe=534A571D&__gda__=1397369913_f139ed03f1e5412da327df063fd94d33"></img>
        </div>
        <div id="lessSpace" class="lessSpaceHor">KOZAK</div>
    </div>
  </body>

CSS

.body{ margin: 0px; }
.container {
  position: fixed;
  height: 100%;
  width: 100%;}

.imgHor {width:100%; display:block;}
.moreSpaceHor {width: 100%;}
.lessSpaceHor {
  background: tomato;
  height: 100%;}

.imgVer { height: 100%; }
.moreSpaceVer {display: inline; float:top;}
.lessSpaceVer {
  #top: 100%;
  width: 100%;
  float:top;
  height:100%;
  display: inline; 
  background: tomato;
  position:absolute;
}

JavaScript

var timeout=-1;

function manageResizing(){
  window.clearTimeout(timeout);
  timeout=setTimeout(resizeView,128);
}

function resizeView(){
  var img=document.getElementById("imgResizer");
  
  var typeOrient = (9*window.innerWidth > 16*window.innerHeight);
  var typeClass  = img.className =="imgVer"; 
  //if class and orientation are the same -> quit
  if(typeOrient == typeClass) return;
 
  var mSpace=document.getElementById("moreSpace");
  var lSpace=document.getElementById("lessSpace");
 
  img.className  = typeClass ? "imgHor" : "imgVer";
  lSpace.className = typeClass ? "lessSpaceHor" : "lessSpaceVer";
  mSpace.className = typeClass ? "moreSpaceHor" : "moreSpaceVer";

}