Size interaction (with "auto" value)

Hi guys,

I’m trying to implement a size interaction on 2 div elements:

First div: the initial state is width: auto and after a click, it resizes to width: 100%
Second div: the initial state is height: 0rem and after a click, it resizes to height: auto

Second click of the same trigger makes a reverse.

I know that there is an issue with html to know the exact dimensions of an element. Thus, the interaction is not smooth and causes elements to change their dimensions in a strange way.

How can I point to HTML the exact element’s dimensions (% or REM) on a page load?