JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<h1></h1>
<p></p>
</div>

CSS

div{
  padding:10px;
  width:500px;
  border:1px black solid;
  display:flex;
  flex-flow:column-reverse;
  position:relative;
  height:300px;
}
h1{
  border:1px black solid;
  height:100px;
width:200px;position:absolute;
left:0;
bottom:0;
  
}
p{ 
width:200px;
border:1px black solid;
  height:100px;
position:absolute;
right:0;
top:0;
}
h1:hover + p{
  background: black;
}