JSFiddle - React, Tailwind, and code Playground

HTML

<div style="visibility:hidden; position:absolute; width:0">
    <svg>
      <g id="my-funky-svg-defs">
        <defs>
          <radialGradient id="gradient" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
            <stop offset=  "0%" stop-color="hsla(313,  80%, 80%, 1)"/>
            <stop offset= "40%" stop-color="hsla(313, 100%, 65%, 1)"/>
            <stop offset="110%" stop-color="hsla(313, 100%, 50%, 0.7)"/>
          </radialGradient>
        </defs>    
        <title>smarteee</title>
        <circle  class="face" cx="200" cy="200" r="195" fill="url(#gradient)" />
        <ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="#131313"/>
        <ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="#131313"/>
        <path class="smile" d="M120,280 Q200,330 280,280" stroke-width="10" stroke="#131313" fill="none" stroke-linecap="round"/>
      </g>
    </svg>
</div>

<div id=ctr>
    <div class="panel-left">
      <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
    </div>

    <div class="splitter">
    </div>

    <div class="panel-right">
      <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
    </div>
</div>

CSS

#ctr
{
    position:        absolute;
    border:          1px solid #131313;    
    top:             5%;
    left:            5%;
    bottom:          5%;
    right:           5%;    
    display:         flex;
    flex-direction:  row;  
}

#ctr svg
{
    height:    100%;
    width:     100%;
}

.panel-left 
{
  flex:         0 0 auto;
  padding:      10px;
  width:        150px;
  min-height:   50px;
  min-width:    150px;
  max-width:    80%;
  max-height:   100%
  white-space:  nowrap;
  background:   #838383;
  color:        white;
}

.splitter 
{
  flex:         0 0 auto;
  width:        18px;  
}

.panel-right 
{
  flex:         1 1 auto;
  padding:      10px;
  background:   #eee;
  min-width:    20px;
}

JavaScript

$(".panel-left").resizable({handleSelector: ".splitter",containment: "parent"});