Is it possible to use an element's undefined (auto) height in a variable / calc function?

Issue

I'm trying to figure out how can I turn an element's undefined (auto) height into a variable... so that I can use it in a calc function.

I've got a two column div. The left column, is a text div with an undefined height (height: auto). The right column, is an image, but the image column's height needs to be greater than the text column's height for it to look good.

Is there a way I could set the right column's height to something like the following?:

/* Let's pretend this left column's height is 463px */
.column.left {
  height: auto;
}

/* And the goal for this right column's height would be 543px */
.column.right {
  height: calc(var(--col-left-height) + 80px);
}

So would it be possible to grab the height of the left column & turn it into a variable without setting a fixed height? I've attached an image of the actual layout I'm doing for this project, thank you so much for the help!

Image example of the layout:

enter image description here

Solution

You can use JavaScript to get the actual height value of an element:

const leftDiv = document.querySelector(".column.left");
const rightDiv = document.querySelector(".column.right");

// get height of left column
const leftDivHeight = leftDiv.offsetHeight;

// set height of the right column: "left column + 80px"
rightDiv.style.height = leftDivHeight + 80 + "px";

Answered By - dbran