JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<div id="test">
test
</div>
<div id="logger">
test 2
</div>
CSS
#test, #logger {
padding: 10px 10px;
width: 100px;
float: left
}
#test {
height: 100px;
}
.border-left {
border-left: 1px solid black;
}
.border-right {
border-right: 1px solid black;
}
JavaScript
$(function () {
var prevHeight = $('#test').height();
$('#logger').attrchange({
callback: function (e) {
var curHeight = $(this).height();
if (curHeight > prevHeight) {
console.log('greater');
$(this).addClass('border-left');
$('#test').removeClass('border-right','');
}else {
$(this).removeClass('border-left');
$('#test').addClass('border-right');
}
}
}).resizable();
});