JSFiddle - React, Tailwind, and code Playground

HTML

<!--<div class="thing-goal"></div>-->
<div class="thing-wrapper">
  <div class="thing left-top">expand right</div>
</div>

<div class="thing-wrapper">
  <div class="thing right-top">expand left</div> 
</div>

<div class="thing-wrapper">
  <div class="thing left-bottom">expand top</div> 
</div>

<div class="thing-wrapper">
  <div class="thing right-bottom">expand bottom</div> 
</div>

CSS

body {
  position: relative;
}

.thing-wrapper {
  position: absolute;
}

.thing {
  border: solid 1px #0f0;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translate(100px, 100px) rotate(-44deg);
  transition: 2s;
}

.thing.left-top:hover,
.thing.right-top:hover{
  width: 200px !important;
  height: 100px !important;
}

.thing.left-bottom:hover,
.thing.right-bottom:hover{
  width: 100px !important;
  height: 200px !important;
}

.left-top {
  left: 0;
  top: 0;
  transform-origin: left top;
}

.right-top {
  right: 0;
  top: 0;
  //transform: translate(150px, 150px) rotate(-44deg);
  transform-origin: right top;
}

.left-bottom {
  left:0;
  bottom: 0;
  transform: translate(300px, 300px) rotate(-44deg);
  transform-origin: left bottom;
}

.right-bottom {
  left: 0;
  right: 0;
  transform: translate(300px, 300px) rotate(-44deg);
  transform-origin: left top;
}