How to split dynamic div content into two div content with specific height using jquery or javascript?

If you wrap your <div> in another <div> then you can use javascript to modify the innerHML of the outer <div> to create whatever internal elements with whatever properties and content you wish.

Getting the current height has a number of solutions.[^] - but why not set it to height="auto" and let nature take it's course?

TLDR: this is not for multiple columns, just 2 columns.

Hope this helps whoever comes across this in the future as I had this same problem. I was fortunate enough to have a character limit, but here goes nothing:

Here is the data:

content={text: 'Lorem ipsum dolor sit amet, consectetur ano adipiscing elit. In tincidunt erat massa, siti amet posuere risus faucibus in. Nullano aliquam tortor eueget dictum ligula inosan ela sodals.'}

// it doesn't look like it but there are spaces in the split and join below
const textAsWordArray = content.text.split(' ').join(' ');

// getting the char count of the text
const charCount = content.text.split('').length;

let leftText;
let rightText;

// 185 is the total char count so I'm doing less than half
if(charCount > 90){
const wordCountHalved = Math.floor(textAsWordArray.length/2);
leftText = textAsWordArray.slice(0, wordCountHalved);
rightText = textAsWordArray.slice(wordCountHalved, textAsWordArray.length)
} else {
leftText = content.text
}

And then your two containers with left and right text variables accordingly