jQuery UI Slide

HTML

<button id="editButton">Toggle Edit Mode</button>
 <button id="deleteButton" >Delete</button>
<div>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar aliquet ante, eu malesuada eros ornare a. Sed eleifend sit amet quam eget vehicula. Fusce viverra bibendum auctor. Quisque sed diam adipiscing, fringilla tortor quis, ullamcorper magna. Integer vel dapibus turpis, sed ullamcorper mauris.
    </article> 
</div>

CSS

div {
    display: flex;
}

article {
    width:100%;
    margin: 5px;
    transition: all 1s;
}

div button {
    -moz-box-sizing: border-box;
    width: 0;
    transition: all 1s;
    float:right;
    overflow:hidden;
    opacity:0;
}

.expanded article {
    height: calc(70% - 5px);
    
}
.expanded button {
    height: 30%;
    opacity:1;

}

JavaScript

$("#editButton").click(function()
{
    $('div').toggleClass('expanded');
});