JSFiddle - React, Tailwind, and code Playground

HTML

<div class="show-title" data-div-title="Div Title">
    <div class="center-me">
        This is my box!
    </div
<div>
<button id="set500">500px</button>
<button id="set1000">1000px</button>
<button id="set1500">1500px</button>

CSS

.show-title::before {
	color: dimgrey;
	content: attr(data-div-title);
	display: block;
	font-size: 1.2em;
	line-height: 1;
	position: absolute;
	top: 10px;
	left: 10px;
	-ms-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	text-orientation: upright;
    padding: 3px;
    background-color: gainsboro;
	border: 1px solid darkgray;
	border-radius: 3px;
    z-index:1;
}

.center-me {
    color: dimgrey;
    padding:10px;
    background-color: gainsboro;
    border: 1px solid maroon;
    width: 500px;
    height: 300px;
    margin-left: auto ;
    margin-right: auto ;
    overflow: auto;
    z-index:10;
}

JavaScript

(function($){
    $("#set500").on("click", function() {
		$(".center-me").width("500px");
    })

    $("#set1000").on("click", function() {
        $(".center-me").width("1000px");
    })

    $("#set1500").on("click", function() {
        $(".center-me").width("1500px");
    })
})(jQuery);