JSFiddle - React, Tailwind, and code Playground

HTML

<div class="double">
    <img src="http://placehold.it/400x400">
</div>

CSS

.double {
    float:left;
    position:relative;
    padding:3px;
    background:blue;
    width:400px;
    height:400px;
}
.double:after {
    content:"";
    display:block;
    position:absolute;
    width:50%;
    height:100%;
    background:red;
    right:0;
    bottom:0;
}
.double img {
    position:relative;
    z-index:1;
}