JSFiddle - React, Tailwind, and code Playground

HTML

<button id = "trigger">Click me</button>
<div class = "wrapper" id = "wrapper-id">
    <p class = "none-content">
        display:none
    </p>
    <p class = "ib-content">
        display:inline-block;
    </p>
</div>

CSS

.none-content,
.ib-content{ 
    display:none; 
    width:0; 
    background:green;
    overflow:hidden;
}
.ib-content{
    display:inline-block;
}
.changed .none-content,
.changed .ib-content{
    background:red;
    display:inline-block; 
    width:200px;
    transition:all 2s;
}

JavaScript

document.getElementById('trigger').onclick = function(){
    var wrapper = document.getElementById('wrapper-id');
    wrapper.className = wrapper.className + ' changed';
}