Exploring the realms of JavaScript led me to a solution that aligns with your requirements, albeit not entirely responsive. Nevertheless, I present this intriguing solution based on DOM and nodes. By retrieving element nodes like p, which are children of column1 and column2, we can compare them.
Asking for all the children of column1 would yield p tags and text nodes because a p node contains another node—a text node. The pivotal element here is the height of p elements.
Thus, segregating all the children nodes from both columns into separate arrays holding p elements became imperative.
To conclude, my approach involved comparing the p elements in each array within a for-loop. For instance, if the height of paragraph2 in column1 exceeds that in column2, then setting the height of paragraph2 in column2 equal to that of paragraph2 in column1 occurs.
// JS :
var col1 = document.getElementById('column_1');
var col1Children = col1.childNodes;
var col2 = document.getElementById('column_2');
var col2Children = col2.childNodes;
var col1Child_p = [];
var col2Child_p = [];
var col1ChildTextNode = [];
var col2ChildTextNode = [];
col1.classList.add('contentM');
col2.classList.add('contentM');
for(var a = 0; a < col1Children.length; a++){
if(col1Children[a].nodeType === 1){ // if child is an element node (like p)
col1Child_p.push(col1Children[a]);
} else {
col1ChildTextNode.push(col1Children[a]);
}
}
for(var b = 0; b < col2Children.length; b++){
if(col2Children[b].nodeType === 1){
col2Child_p.push(col2Children[b]);
} else{
col1ChildTextNode.push(col2Children[b]);
}
}
for (var i = 0; i < 4; i++) {
var col1ChildHeight = col1Child_p[i].clientHeight;
var col2ChildHeight = col2Child_p[i].clientHeight;
if (col1Child_p[i].clientHeight > col2Child_p[i].clientHeight) {
col2Child_p[i].style.height = col1ChildHeight + 'px';
} else if (col1Child_p[i].clientHeight < col2Child_p[i].clientHeight{
col1Child_p[i].style.height = col2ChildHeight + 'px';
} else {
console.log('not working - already the same height');
}
}
// CSS :
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 0.9em;
}
p {
height: auto;
}
#container {
width: 80%;
margin: 0 auto;
}
#column_1 {
background-color: orange;
}
#column_2 {
background-color: red;
}
#column_1 p,
#column_2 p {
background-color: pink;
}
section {
display: block;
width: 100%;
background-color: blue;
}
.contentM {
width: 47.389558232932%; /* 472 / 996 */
margin: 0 1.305220883534%; /* 13 / 996 */
display: inline-block;
float: left;
}
/* under a screen size of 640 px, a css rule overwrite the javascript calculation : */
@media screen and (max-width: 640px) {
.container {
width: auto !important;
margin: 0 13px;
}
.contentL,
.contentM,
.contentS {
width: 100% !important;
margin: 0 0 13px 0 !important;
}
p {
height: auto !important;
}
}
@media screen and (max-width: 768px) {
.container {
width: 90%;
}
}
/////////////
Another approach involves utilizing flexbox. This strategy offers cleaner code maintenance and less confusion while being well-supported by modern browsers.
I had to modify the HTML structure to adhere to this method.
// HTML :
<body>
<div id="container">
<section>
<article id="column" class="contentM">
<div>
<p>PARAGRAPH 1 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
<p>PARAGRAPH 1 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
</div>
<div>
<p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena. It applies mathematics, physics, and chemistry, in an effort to explain the origin of those objects and phenomena and their evolution.</p>
<p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
</div>
<div>
<p>PARAGRAPH 3 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
<p>PARAGRAPH 2 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
</div>
<div>
<p>PARAGRAPH 4 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena</p>
<p>PARAGRAPH 4 : Astronomy (from Greek: αστρονομία) is a natural science that studies celestial objects and phenomena.</p>
</div>
</article>
</section>
// CSS :
p {
width: 100%;
margin: 5px 5px;
background-color: orange;
}
container {
width: 80%;
}
section {
width: 100%;
}
article {
margin: 5px 5px;
background-color: red;
float: left;
}
.contentM {
width: 48%;
}
.row {
display: flex;
}
// JS :
var col = document.getElementById('column');
var rowDiv = document.querySelectorAll('#column > div');
for(var i = 0; i < rowDiv.length; i++){
rowDiv[i].classList.add('row');
}
////////
In the meantime, @Noot, you mentioned achieving similar results using flex. Did it entail altering the HTML document's structure? Feel free to share your findings.