How to have text in a div keep the same size width inside of an expanding div

Question

I have some code that expands a div from the left side of the screen by increasing its width. In this div I have a list with text that wraps down the div. My question is; when it expands you can see the text expanding character-by-character with it as it resizes, is there a way to have the text remain the same size so that when the div expands, the text does not move (almost like the text is just hidden behind it until it moves out)? Trying to use purely JavaScript, HTML, and/or CSS.

Expand
</button>
<div id="listmenu" class="list">
        <span onclick="document.getElementById('listmenu').style.width = '0%'">&times;</span>
        <ul>
            <li>Placeholder text that is long enough to go to the next line</li>
            <li>Placeholder</li>
            <li>Placeholder</li>
            <li>Placeholder</li>
            <li>Placeholder</li>
        </ul>
</div>
CSS:
.list {
  position: fixed;
  overflow-x: hidden;
  background-color: black;
  width: 0%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 1s all ease-in-out;
}

.list li {
  color: white;
}

.list span {
  float: right;
  padding-right: 5px;
  color: white;
  cursor: pointer;
}

JSFiddle

Answer 1

You can try like this:

 .list { position: fixed; overflow-x: hidden; background-color: black; width: 30%; height: 100%; left: -30%; top: 0; transition: 1s all ease-in-out; }.list li { color: white; }.list span { float: right; padding-right: 5px; color: white; cursor: pointer; }

 <button onclick="document.getElementById('listmenu').style.left = '0'"> Expand </button> <div id="listmenu" class="list"> <span onclick="document.getElementById('listmenu').style.left = '-30%'">&times;</span> <ul> <li>Placeholder text that is long enough to go to the next line</li> <li>Placeholder</li> <li>Placeholder</li> <li>Placeholder</li> <li>Placeholder</li> </ul> </div>