How to make two columns same height dynamically

Question

I hava a page with two columns. I would like to textarea height mimic left column height. Left column is short when webpage loads, but when user starts expanding various properties (checkboxes + dropdownmenus) it grows based on hidden divs. But my textarea is still small in right column and making it staticly bigger does not look good. I want it to grow per left column height. Not sure how to achieve that.

EDIT: Once height: 100%; was added to textarea it solved the issue with columns growth. But I ran into another two issues.

1. Textarea in right column overlaps that column on page load. When I try to resize, it suddenly jumps to the column properly. Weird behavior. here is the pic - textarea overlaps column
2. Left column context is not aligned properly with right. How I am going to align or justify context of both columns so they end up like this: here is the pic - final look

My CSS:

body {
    height: 100%;
    position: relative;
    background: #000000;
    color: #66adff;
    font-size: 105%;
    font-family: serif, Arial, Helvetica
}

.column {
    border: 5px solid #333;
  }
.container{
    display: flex; 
}

.columnleft {
    width: 45%;
    padding: 10px;
    display: table-cell;
  }
  
.columnright {
    width: 45%;
    padding: 10px; 
    display: table-cell;
}
  
textarea.out {width: 100%; height: 100%; box-sizing: border-box;}

EDIT 2: Issue 1 - I had text inside the column which pushed area down Issue 2 - all was fixed with proper padding

Thanks all for replies.

Answer 1

I think you could do this without js, but use CSS Grid instead.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; // the width of each column
  grid-template-rows: auto; // row height will auto-adjust to contents
}

<div class="grid-container">
  <div class="column-left">
    ...some dynamic content
    gets bigger and bigger and bigger and         bigger and bigger
  </div>
  <div class="column-right">
    might be empty or small or large
  </div>
</div>

The grid row height will always adjust to the height of the largest content which will make both columns the same height.

Answer 2

Since you're using flex, the right column should be automatically adjusting to match the left column. It sounds like your issue is that the textarea is not expanding automatically to match its container (right column.)

If that's the case, try this simple fix - in your CSS, set textarea height to 100% to automatically fill its parent:

textarea {
   height: 100%;
};

Here's an example answer: Textarea to fill a parent container exactly, with padding

Answer 3

The reason your code wasn't working was because you didn't set the height to your textarea settting the height to 100% will always make it fit the maximum size of it's container (<div>) also i have added box-sizing: border-box; so that you can add padding to your columnright.

A better explanation about box-sizing can be found here (just won't explain here because i couldn't do better then this): https://css-tricks.com/box-sizing/

function f_anyEvent(){
    var leftcolumnHeight = document.getElementById('columnleft').style.height.value;
    if (document.getElementById('columnleft').style.height != document.getElementById('columnright').style.height)
    document.getElementById('columnright').style.height = leftcolumnHeight.value;
} 

document.getElementById('add').addEventListener('click', function() {
    let columnleft = document.getElementById('columnleft');
  columnleft.innerHTML += '<h1>a</h1>';
});

.row{
    display: flex; 
}

.column {
  border: 1px solid #333;
}

.columnleft {
    float: left;
    width: 45%;
    padding: 10px;
    display: table-cell;
  }
  
.columnright {
    float: left;
    width: 45%;
    padding: 10px; 
    display: table-cell;
  }
  
  textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

<div class="row">
  <div id="columnleft" class="column columnleft">
    
  </div>
  <div id="columnright" class="column columnright">
    <textarea></textarea>
  </div>
</div>

<button id="add">
  add
</button>

Every time you click add it will add an <h1> to your left column and your textarea will get the same height as columnleft.

Answer 4

Here's a basic demo of an interface similar to yours that uses display: grid on the parent container to automagically keep the two inner divs the same height. (Click on the blue details element to trigger a height change.)

It's wonderfully simple. (Thanks for inspiring me to finally learn how grid works.)

// The JavaScript isn't needed for the dynamic styling. (It just copies the text.)
const
  left = document.getElementById("left"),
  right = document.getElementById("right");
left.addEventListener("change", showOutput);

function showOutput(event){
  right.innerHTML = this.querySelector("#reasons").value
}

div { max-width: 400px; border: 1px solid grey; }
details{ margin: 10px 5px; color: #0000DD; text-decoration: underline; }

/* This is where the magic happens */
#container { display: grid; grid-template-columns: 1fr 1fr; }

#left{ padding: 10px; }
#right { white-space: pre-wrap; }

<div id="container">
  <div id="left">
    <label> <input type="checkbox"/> I like pie </label>
    <details>
      <summary>Type your reasons here</summary> <textarea id="reasons"></textarea>
    </details>
  </div>
  <div id="right"></div>
</div>