I am facing an issue with two divs, each containing two nested divs: https://i.sstatic.net/QFMiU.png
<div class="hide">
<div>
Variable size
</div>
<div>
Text1 (also variable size)
</div>
</div>
<div class="hide">
<div>
Different variable size
</div>
<div>
Text2 (also variable size)
</div>
</div>
In case the screen size is small, I want the texts to be hidden: https://i.sstatic.net/XJtFL.png
To achieve this, I have applied the following CSS:
.hide {
display: flex;
height: 100px;
flex-wrap: wrap;
overflow: hidden;
}
However, if the size of the first text is too large, but the second one is not, it results in the following layout: https://i.sstatic.net/fTXjN.png
My goal is to hide both texts simultaneously.
Is there a solution (without using jQuery) to address this issue? I would prefer a CSS or SASS solution, but using JS (I utilize Angular) is also acceptable.