Text popping in during CSS3 animation - html

Question

So I built a menu and would like to be able to toggle it. I'm simply animation the width using CSS3.
-webkit-transition: width 1s;
transition: width 1s;
Now, when the menu is closed and you re-open it, the menu items "pop in", as shown here: https://gyazo.com/6dfee24687fff026e464323882770959
I think it's because the sentences are wrapping. I've tried everything to stop that from happening, to no avail.
This is my structure:
<div id="menu" class="col-md-2 col-xs-12 nopad closed">
<div id="togglemenu" class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="nopad menu-header col-xs-12" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div class="pull-right menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div>MENU</div>
</div>
</div>
<div class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon">
<div class="vertical">
<div>
<i class="fa fa-usd" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 menu-item active">
<div class="vertical">
<div>Menu item</div>
</div>
</div>
</div>
<div class="nopad menu-header btop col-xs-12">
<div class="vertical">
<div>Menu divider</div>
</div>
</div>
</div>
And the CSS that goes along with it:
#menu {
min-height: 65vh;
background: #1c2329;
-webkit-transition: width 1s;
transition: width 1s;
}
#menu div {
text-overflow: clip;
}
.togglemenu {
cursor: pointer;
}
.menu-header {
text-align: center;
color: white;
text-transform: uppercase;
background: #181d21;
}
.menu-header.btop {
border-top: 1px solid #3de66e;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.menu-icon {
background: #1c252a;
text-align: center;
font-size: 2.1vh;
color: #3de66e;
}
.menu-item {
background: #1c2329;
text-transform: uppercase;
cursor: pointer;
}
.menu-item.active {
border-right: 3px solid #3de66e;
}
.menu-icon, .menu-header, .menu-item {
height: 5vh;
display: table;
overflow: hidden;
}
#menu.closed .menu-item, #menu.closed .col-md-9, #menu.closed .menu-header {
display: none;
}
#menu.closed .menu-item div {
display: block;
}
#menu.closed {
width: 3vw;
}
#menu.closed .menu-part {
display: none;
}
#togglemenu {
display: none;
}
#menu.closed #togglemenu {
display: block;
}
I was hoping someone could help me. Thanks in advance!