JSFiddle - React, Tailwind, and code Playground

HTML

<div id="heart"></div>
<div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div><div class="box"></div>

CSS

.box {
    float: left;
    margin: 4px;
    width: 100px; height: 100px; background: blue;
}
.highlight {
    width: 120px;
    background: green;
}
#heart {
    margin: 4px;
    width: 100px; height: 100px; background: red;
}

JavaScript

$(".box").on("mouseover mouseout", function(e) {

	$(this).toggleClass("highlight", e.type === "mouseover");

	var size = $(this).width();

	$("#heart").width(size);

});