body {background:white; font:12px/150% tahoma; width:100%; height:100%; position:relative;}

#main {
    position:relative;
    display: block;
    width:60%;
    height:60%;
}

/* styling the styled html */

#main > div.styled {
    /* these are the important parts */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100px; /* you can change this */
    max-width:100%;
    overflow: hidden;
    height:100%;
    resize: horizontal;

    /* the below are the styles you want to preview */
    background:#000;
    color:#fff;
}

#main div.styled > div.content {width:100%;}

/* styling the resize drag thingy */

#main > div.styled::before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 13px; height: 13px;
    padding: 5px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
    -webkit-filter: drop-shadow(0 0 2px black);
    filter: drop-shadow(0 0 2px black);
	zorder: 6
}

/* original HTML w/out styling div */

#main .original {
    user-select: none;
    width:100%;
    height:100%;
}