JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00"></div>
  To my left is a red box<br>
  Now there is just text<br>
  Text that goes on for a few pixels <br>
  or even more
</div>
<div id="partial-overlay"></div>

CSS

body {
  margin : 0;
}

#main-view {
  background-color : white;
  position : relative;
  overflow : show;
  width : 50vw;
  height : 200px;
}

}#red {
    width: 50px; 
    height: 50px; 
    background: #f00;
}

#partial-overlay {
    width:90px; 
    height:90px;
    background-color : white;
    background: -moz-element(#main-view);
    background-size : 50vw 200px;
    filter : blur(10px);
    top: 0px;
    left: 0px;
    position: absolute;
    border : 2px solid white;
    outline : 1px solid red;
}