JSFiddle - React, Tailwind, and code Playground

HTML

<div><button>Change Size</button></div>
<div data-editor-wrapper="true" class="element-wrapper FPO-element-wrapper" style="display: inline-block; position: relative; width: 400px; height: 400px;" data-editor-uid="cfd19218" draggable="false">
    <img contenteditable="false" src="http://placekitten.com/500/500" draggable="false" style="height: 100%; width: 100%;" data-editor-uid="26f8a3dd" data-editor-contenteditable="true"/>
    <div data-editor-unchangeable="true" class="FPO" style="position: absolute;" data-editor-uid="adcad8a8">
        <div class="FPO-inner" data-editor-uid="13c6e053"><div data-editor-uid="987b2c42" data-editor-contenteditable="true">FPO</div>
        <div class="description" data-editor-uid="e91ec59d" data-editor-contenteditable="true">(for placement only)</div>
        </div>
    </div>
</div>

CSS

.FPO-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.FPO {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #777;
    font-family: arial;
    font-size: 88px;
    line-height: normal;
    pointer-events: none;
}
.FPO .description {
    font-size: 20px;
    display: block;
}
.FPO-element-wrapper img{
    opacity: 0.7
}

JavaScript

$$('button').addEvent('click', function(){
   var el = $$('.element-wrapper')[0];
    var newSize = el.getStyle('width') == '200px' ? '400px' : '200px'
    el.setStyles({
        width: newSize,
        height: newSize
    })
})