How to transition item size change inside a display: flex; justify-content: space-between; div

Question

I have a display: flex; justify-content: space-between; container div with 2 chidren inside. The second child classes will be changed to include (or not) a class with display: none;. It does get hidden when the logic applies this class, and the first child grows in width to fit the parent div. The problem is that I can't make the first child width change to transition, so when the second child goes hidden or not, the first child is instantly changing its width. I want its width to grow to its full width, instead of suddenly changing to its full width.

I am using React, but it should be possible only with css, right? If so, how can I achieve this?

Here is the reproducible example:

document.getElementById("toggle").addEventListener("click",function(e){
    document.getElementById("second").classList.toggle("hidden")
},false);

.container {
  display: flex;
  justify-content: space-between;

  background: #aaf;
  width: 200px;
  height: 40px;
  align-items: center;
}

.container > *:first-child {
  background: #afa;
  flex-grow: 1;
}

.container > *:last-child {
  display: flex;
  justify-content: space-between;

  background: #faa;
  width: 50px;
}

.container > *:last-child.hidden {
  display: none;
}

<div class="container">
  <div><span>1st</span></div>
  <div id="second" class="hidden">2nd</div>
</div>
<button id="toggle">toggle</button>