Max-height no respecting css transistion - css

Question

I'm trying to create a CSS transistion where When I click on a button it fades out and disappears to which another element will take it's place.
I've nearly completed it, however. When applying the class .hide to the button it "jumps" (the height property is not to be touched until the opacity is done). The max-height does not seem to respect the css transition property I've set in the css.
Codepen: https://codepen.io/basickarl/pen/zwzNXM?editors=1111
HTML:
<div class="app-profession">
<button id="one" class="add-profession" onclick="func()">
<img/>
Click me!
</button>
<div id="two" key="pickArea" class="pick-area">
Here! 2
</div>
</div>
SCSS:
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Verdana';
font-size: 18px;
font-weight: 300;
text-decoration: none;
color: black;
outline-style: none;
border: none;
border-radius: em(0);
opacity: 1;
background: lightblue;
img {
margin-right: em(5);
content: url('static/images/add_cross_white.png');
height: em(30);
}
transition: opacity 2s ease-in-out 0s, max-height 0s linear 2s, padding 0s ease-in-out 2s;
&.hide {
opacity: 0;
max-height: 0; // <--- here
padding: 0;
overflow: hidden;
}
&:hover {
background-color: red;
cursor: pointer;
}
}
.pick-area {
display: flex;
justify-content: center;
align-items: center;
background-color: green;
opacity: 0;
max-height: 0em;
overflow: hidden;
width: 500px;
padding: 16px;
transition: all 2s linear 2s;
&.show {
max-height: 500px;
opacity: 1;
}
}
JS:
function func() {
document.getElementById('one').classList.add('hide');
document.getElementById('two').classList.add('show');
}

Answer 1

If you add a max-height to the button.add-profession class it will stop jumping
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
max-height: 60px; /* added property */
....
Updated codepen