CSS transition for height without setting a static initial height - css-transitions

Question

I'm trying to apply a class that will fade opacity and height from their default 100% to 0 evenly using a CSS transition.
What is happening is that the opacity is fading evenly, but the height stays at 100% and then jumps to 0 at the end of the .5 second transition.
How can I get the height to transition evenly along with the opacity?
update:
How might this be done without setting a static initial height on the div? The height the text flows to will differ at different browser widths.
function fadeOut(){
$('#intro').addClass('fadeout');
}
$('#fadeout').on('click', fadeOut);
.fullheight{
position: relative;
height: 100%;
}
.fadeout{
opacity: 0;
height: 0;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fullheight" id="intro">Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out.</div>
<button id="fadeout">Fade out</button>

Answer 1

For this to work you net to set the height to a set value like 100px in my example
function fadeOut(){
$('#intro').addClass('fadeout');
}
$('#fadeout').on('click', fadeOut);
.fullheight{
position: relative;
height: 100px;
}
.fadeout{
opacity: 0;
height: 0;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fullheight" id="intro">Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out. Here is some long intro text that we will fade out.</div>
<button id="fadeout">Fade out</button>