Resize Div on Click and MouseDown - jquery-ui

Question

I'm using jQuery UI. #scene1 is currently being resized and works perfectly when I drag the edge. But, #scene1 needs to be resized when the users mouse is down on #LeftArrow.
I don't understand resize start() or stop() and how to use mouse events. Can someone please help me out?
$('#scene1').resizable({
maxWidth: 300,
maxHeight: 600,
minHeight: 600,
minWidth: 0,
handles: 'e',
});
#LeftArrow {
position: absolute;
background-image: url('../graphics/LeftArrow.jpg');
width: 51px;
height: 71px;
bottom: 156px;
right: 0px;
}
<div id = "codeSection"></div>
<div id = "scene1">
<div id = "LeftArrow"></div>
</div>
<div id = "scene2">
<div id = "S1_Image"><img src = "graphics/S2_Image.jpg"></div>
<div id = "CTAs">
<div id="CTA1" class="transButton">Learn more</div>
<div id="CTA2" class="transButton">Explore</div>
</div>
</div>

Answer 1

You need a link that calls a JS function that sets your width and height.
<style>
#LeftArrow {
position: absolute;
background-image: url('../graphics/LeftArrow.jpg');
width: 51px;
height: 71px;
bottom: 156px;
right: 0px;
}
</style>
<script>
$('#scene1').resizable({
maxWidth: 300,
maxHeight: 600,
minHeight: 600,
minWidth: 0,
handles: 'e',
});
function resizeLeftArrow(){
$('#LeftArrow').width(555);
$('#LeftArrow').height(555);
}
</script>
<div id = "codeSection"></div>
<div id="scene1">
<div id="LeftArrow">click me to grow bigger</div>
</div>