JSFiddle - React, Tailwind, and code Playground

HTML

<div id="varied-width">
    <div class="pg-sp2 prompt-gate">Did you find what you were looking for?
        <div class="pg-3-buttons">
            <button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, no no nono, no, no no.</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
        </div>
    </div>
</div>
<br/>
<br/>
<button id="toggler-small">Make small</button>
<button id="toggler-wide">Make large</button>

CSS

body {
    width: 400px;
}

.prompt-gate {
	margin-top: 25px;
	margin-bottom: 15px;
	background-color: #fefab1;
	border: 1px solid #ffd532;
	padding: 10px;
	text-align: center;
}

.prompt-gate-button {
	background-color: #0E80B4;
	color: white;
	font-size: 12px;
	height: 60px;
	width: 72px;
	border: none;
	margin: 15px 25px;
	outline: none;
	font-style: normal;
	cursor: pointer;
}

.pg-3-buttons {
	margin-top: 10px;
}

.pg-sp2 button {
	margin: 5px 15px;
	width: 120px;
}

JavaScript

$("#toggler-small").click(function () {
    $("#varied-width").css("width", "300");
});

$("#toggler-wide").click(function () {
    $("#varied-width").css("width", "400");
});