JSFiddle - React, Tailwind, and code Playground

by Kubismus

HTML

<div class="container">
  <div class="left">
  
  </div>
  
  <div class="right">
     <img src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1548087392/ka6fgbjakjeskramtkew.jpg">
  </div>
</div>

CSS

.container {
  width: 100%;
}

.left {
  width: 67%;
  height: 100%;
  background: blue;
  float: left;
}

.right {
  width: 33%;
  height: 100%;
  float: right;
  z-index: -1;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.container:hover .left {
  width: 100%;
}

JavaScript

$(".container").css({'height':($("img").height()+'px')});