JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="column1">This column Has some content</div>
    <div class="column2">This column also has some content
        <div id="contentToHide">
            <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
        </div>
    </div>
</div>
<button id="removeButton">Remove Content</button>
<br/>
<button id="addButton">Add Content</button>

CSS

#wrapper {
    display: flex;
    width: 400px;
    margin-bottom: 30px;

}
.column1 {
    
    padding: 10px;
    background: #DDD;

 
}
.column2 {
    padding: 10px;
    background: #EEE;     width:50%; 
}
#contentToHide.hidden {
    display: none;
    height:0
}
.prelative {
    position:relative;
}
div:before {
    content:attr(class);
    left:-9999px;
    position:absolute;
}

JavaScript

document.getElementById('removeButton').addEventListener("click", function (event) {
    document.getElementById('contentToHide').classList.add("hidden");
        document.getElementById('wrapper').classList.add("prelative");
});

document.getElementById('addButton').addEventListener("click", function (event) {
    document.getElementById('contentToHide').classList.remove("hidden");
    document.getElementById('wrapper').classList.remove("prelative");
});