JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img class="A" src="http://www.webdesign.org/img_articles/7072/BW-kitten.jpg" />
    <h1>Some header to break this u.</h1>
    <p>
      Let's pretend this kitty above is the header. Now, let's put a puppy here to the right. When We hoer over Mr. Kitty, Mr. Puppy will also animate!
        <img class="B" src="http://www.cutepuppiesforsale.net/wp-content/uploads/2010/04/Puppies-For-Sale-2.jpg" />        
Now, some dummy text! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, est et cursus luctus, felis mi tempor lacus, et ultricies augue tortor a turpis. Nam nunc purus, blandit eu sodales ut, venenatis nec sapien. Cras ut aliquet lorem. Mauris eget quam tellus. Praesent sit amet nunc quam. Mauris ut felis ligula. Curabitur hendrerit ante non risus aliquam sodales. Phasellus at erat leo, non tincidunt metus. Quisque eget tellus ligula. Praesent eget neque lorem, a accumsan dui. Quisque quis quam magna, sed tempus felis. Fusce in leo nec quam aliquet lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu ligula nec sapien rhoncus dapibus sit amet vel lectus. Aliquam justo felis, elementum at rutrum quis, tempor vitae lectus. Donec a est ac quam porttitor tempus.        
    </p>
</div>

CSS

div > div {border:1px solid #000; background:#CCC; margin:10px; width:100px; height:100px;}

img {height:100px; width:auto; -webkit-transition:height 0.25s ease-in-out;  -moz-transition:height 0.25s ease-in-out;  -o-transition:height 0.25s ease-in-out;  transition:height 0.25s ease-in-out;}
img.B {float:right;}

img.A:hover {height:200px;}
img.A:hover ~ p img.B {height:200px;}