JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    
    <div id="hidden" class="one">one</div>
    <div id="button" class="two">two</div>
   
</div>

CSS

.main {
    width:500px;
    height:100px;
}
.one {
    width:0px;
    display:inline-block;
    visibility: hidden;
    background-color:#f00;
	-webkit-transition: width 0.2s ease;
	-moz-transition: width 0.2s ease;
	-o-transition: width 0.2s ease,;
	transition: width 0.2s ease;
}
.two {
    width:200px;
    display:inline-block;
    background-color:#0c0;
}

JavaScript

window.onload = function(){

var   button = document.getElementById('button')
    , hidden = document.getElementById('hidden')
    ;
button.onclick = showElement;
hidden.style.width = '0px';

function showElement() {
    if (hidden.style.width == '0px') {
        hidden.style.visibility = 'visible';
        hidden.style.width = '200px';
    } else {
        hidden.style.width = '0px';
        hidden.style.visibility = 'hidden';
    }
}

};