JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target">all around me</div>
<div class="element"></div>

CSS

#target, .element {
		position: absolute;
		border: 1px solid black;
		border-radius: 5px;
		width: 75px;
		height: 25px;
		padding: 5px;
		font-size: 62.5%;
	}
	#target {
		height: 75px;
	}
	.element:before {
		font-size: 12pt;
		content: "↑";
		position: absolute;
		top: -19px;
		left: 5px;
	}
	.right:before {
		left: auto;
		right: 5px;
	}
	.bottom:before {
		content: "↓";
		top: auto;
		bottom: -19px;
	}
	.center:before {
		left: 50%;
		right: auto;
	}
	.middle:before {
		top: 50%;
		bottom: auto;
	}
	.horizontal:before {
		height: 10px;
		top: 50%;
		margin-top: -8px;
		bottom: auto;
		left: -18px;
		right: auto;
		content: "←";
	}
	.right.horizontal:before {
		left: auto;
		right: -18px;
		content: "→";
	}
	.bottom.horizontal:before {
		top: auto;
		bottom: 5px;
	}
	.top.horizontal:before {
		top: 5px;
	}

JavaScript

/*!
 * jQuery UI Position
 * http://jqueryui.com
 *
 * Copyright 2014 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/position/
 */
(function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "jquery" ], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
}(function( $ ) {

	$.ui = $.ui || {};

	var cachedScrollbarWidth, supportsOffsetFractions,
		max = Math.max,
		abs = Math.abs,
		round = Math.round,
		rhorizontal = /left|center|right/,
		rvertical = /top|center|bottom/,
		roffset = /[\+\-]\d+(\.[\d]+)?%?/,
		rposition = /^\w+/,
		rpercent = /%$/,
		_position = $.fn.position;

	function getOffsets( offsets, width, height ) {
		return [
			parseFloat( offsets[ 0 ] ) * ( rpercent.test( offsets[ 0 ] ) ? width / 100 : 1 ),
			parseFloat( offsets[ 1 ] ) * ( rpercent.test( offsets[ 1 ] ) ? height / 100 : 1 )
		];
	}

	function parseCss( element, property ) {
		return parseInt( $.css( element, property ), 10 ) || 0;
	}

	function getDimensions( elem ) {
		var raw = elem[0];
		if ( raw.nodeType === 9 ) {
			return {
				width: elem.width(),
				height: elem.height(),
				offset: { top: 0, left: 0 }
			};
		}
		if ( $.isWindow( raw ) ) {
			return {
				width: elem.width(),
				height: elem.height(),
				offset: { top: elem.scrollTop(), left: elem.scrollLeft() }
			};
		}
		if ( raw.preventDefault ) {
			return {
				width: 0,
				height: 0,
				offset: { top: raw.pageY, left: raw.pageX }
			};
		}
		return {
			width: elem.outerWidth(),
			height: elem.outerHeight(),
			offset: elem.offset()
		};
	}

	$.position = {
		scrollbarWidth: function() {
			if ( cachedScrollbarWidth !== undefined ) {
				return cachedScrollbarWidth;
			}
			var w1, w2,
				div = $( "<div style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>"...