JSFiddle - React, Tailwind, and code Playground

HTML

<p class="slider-price">$50,000</p>

CSS

body {
background-color: #000;
}

.slider-price {
display: inline-block;
border: 3px solid #fff;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: "Lato", sans-serif;
font-size: 18px;
color: #fff;
padding: 5px 10px 5px 10px;
font-weight: 700;
}

JavaScript

var myElement = $("p.slider-price");
var parent = $("p.slider-price").parent();

var a = ((myElement.parent().height() - myElement.outerHeight()) / 2);
var b = myElement.parent().scrollTop();
var c = ((myElement.parent().width() - myElement.outerWidth()) / 2);
var d = myElement.parent().scrollLeft();
var attrbt = a + b + "px" + ', ' + c + d + "px";
myElement.attr('data-position', attrbt);