JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<!-- #grandpa exists only to show us the area that #spam_and_ham_mix takes  -->

<div id="grandpa">

    <div id="spam_and_ham_mix">
        Irrelevant, looooooooong text (--> should be hidden)
        <div id="ham">Important stuff <br /> (--> should be visible)</div>
        
    </div>

</div>

CSS

/* #grandpa exists only to show us the area that #spam_and_ham_mix takes */
#grandpa { border: 1px dashed red; float: left; }

#spam_and_ham_mix { 
    visibility: hidden;
    height: 0px;
    position: relative;
    overflow: visible;
}
#spam_and_ham_mix #ham { 
    visibility: visible;
    border: 1px dashed green;
    position: absolute;
    top: 0px;
    left: 0px;
}