JSFiddle - React, Tailwind, and code Playground

HTML

<div class="p">
    <div class="in" rel="top:left" onclick="increase(event)">
      
      In ancient manuscripts, another means to divide sentences into paragraphs was a line break (newline) followed by an initial at the beginning of the next paragraph. An initial is an oversized capital letter, sometimes outdented beyond the margin of the text.

    </div>
    <div class="in" rel="top:right" onclick="increase(event)"></div>
    <div class="in" rel="bottom:left" onclick="increase(event)"></div>
    <div class="in" rel="bottom:right" onclick="increase(event)"></div>
    <br class="cB">
</div>

CSS

.p {
    width: 524px;
    position: relative;
}
.in {
    margin: 10px;
    width: 240px;
    height: 80px;
    background-color: #aaa;
    float:left;
    border: 1px solid #fff;
}
.cB {
    clear:both;
}

JavaScript

function increase(event){
    $this = $(event.target);
    if( $(".bigger").length > 0 )
        decrease($(".bigger"));
    $fixed_corner = $this.attr("rel").split(":");
    if( !$this.hasClass("bigger") ){
        $new = $this.clone();
        $new.insertAfter($this);
        $new.css("position", "absolute").addClass("bigger");
        var offset = $this.position(), w = $this.outerWidth(true), h = $this.outerHeight(true);
        if( $fixed_corner[0] == "top" )
            $new.css("top", offset.top);
        else
            $new.css("bottom", offset.top-h);
        if( $fixed_corner[1] == "left" )
            $new.css("left", offset.left);
        else
            $new.css("right", offset.left-w);
        $new.animate({width: "+=50", height: "+=30", backgroundColor: "#eee"});
        console.log($fixed_corner);
    } else {
        decrease($this);
    }
}
function decrease($this){
    $this.animate({width: "-=50", height: "-=30", backgroundColor: "#aaa"}, 300, function(){$(this).remove();});    
}