JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="tabular">
    <div class="cell">
        <button class="btn btn-default btn-block" id="cancelBtn">Annuller</button>
        <button class="btn btn-danger btn-block" id="deleteBtn">Slet dette element...</button>
    </div>
    <div class="cell">
        <button class="btn btn-danger btn-block" id="confirmDeleteBtn">Bekræft sletning</button>
    </div>
</div>
<p>lorem ipsum</p>

CSS

.tabular { 
    display: table;
}
.cell {
    display: table-cell;
    padding: 0.25em;
}
#confirmDeleteBtn,
#cancelBtn {
    display: none;
}

.minimal-height {
    /*height: 0 !important;*/
    /*overflow: hidden;*/
    /*padding-top: 0 !important;
    padding-bottom: 0 !important;*/
}

JavaScript

$("#deleteBtn").click(
function () {
    $(this).addClass("minimal-height");
    $(this).css("visibility", "hidden");
    $("#cancelBtn, #confirmDeleteBtn").show();
});

$("#cancelBtn").click(
function () {
    $("#deleteBtn").removeClass("minimal-height");
    $("#deleteBtn").css("visibility", "visible");
    $("#cancelBtn, #confirmDeleteBtn").hide();
});