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;
}

.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;
    position:relative;
    z-index:10;
}

JavaScript

(function($){
    $("[id^=set]").on("click", function() {
		$(".center-me").width( this.id.split("set")[1] );
    });
})(jQuery);