JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">

</div>
<div id="right">

</div>
<div id="info">
  Shrink the width of the panel with the red and blue squares!
</div>

CSS

#left {
  width: 300px;
  height: 200px;
  float: left;
  background: blue;
}

#right {
  width: 300px;
  height: 200px;
  float: right;
  background: red;
}

#info {
  clear: both;
  padding: 25px;
  text-align: center;
  margin: 10px;
  }
}

JavaScript

$(window).on("resize", function() {
	var leftTop = $("#left").position().top;
  var rightTop = $("#right").position().top;
  if (Math.abs(leftTop - rightTop) > 50) {
  	$("#info").html("Line broke!");
  } else {
  $("#info").html("Shrink the width of the panel with the red and blue squares!");
  }
});