how to make side by side Divs (with <p> inside) as a 2-column table-CodePudding

I am trying to make a side-by-side table with 2 divs column, that contains many <p> elements inside. That would be easy if these two Divs and their contents are horizontal, but in this case, they are vertical, two sides' heights are not the same.

Is there any way to do it without using JavaScript?

*EDIT: The reason I put two separate divs side by side is that I put new content to them using JavaScript Prepend. On the left side are the English texts, and on the right side are translated texts. It would be easier for me if the English texts were together inside a div and the same for the translated texts.

I have done it by using Javascript and setting one side's style. height = the other side's clientHeight, it would be much better if I was able to do this with only CSS and HTML

for (let i = 0; i < document.querySelectorAll('#div1 p').length; i  ) {
  
document.querySelectorAll('#div1 p')[i].style.height = "auto";
document.querySelectorAll('#div2 p')[i].style.height = "auto";



if (document.querySelectorAll('#div1 p')[i].clientHeight > document.querySelectorAll('#div2 p')[i].clientHeight )
{
 document.querySelectorAll('#div2 p')[i].style.height = document.querySelectorAll('#div1 p')[i].clientHeight-3 'px'
}
else 
{
 document.querySelectorAll('#div1 p')[i].style.height = document.querySelectorAll('#div2 p')[i].clientHeight-3 'px'
}
}

body {
  font-family: Consolas,Menlo,"courier new",monospace;
  font-size: 18px;
}

.grid-container {}

#div1{
  width: 50%;
  display: table-cell;
}

#div2{
  width: 50%;
  display: table-cell;
}

p{
  margin-top: 0px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #0000ff00;
  border-color: gray;
}

<div >
  <div id="div2" > 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
    <p> the second cell</p>
    <p> the 3rd cell </p>
    <p> the 4th cell </p>
  </div>
  <div id="div1" >
    <p> I want this cell's height same as the left "lorem ipsum" cell </p>
    <p> the second cell</p>
    <p> the 3rd cell</p>
  </div>
</div>

CodePudding user response：

Here how i would do it, with rows taking 100% and cells taking 50%

.cell {
  width: 50%
}

.row {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 0px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #0000ff00;
  border-color: gray;
}

body {
  font-family: Consolas, Menlo, "courier new", monospace;
  font-size: 18px;
}

<div >
  <div >
    <div >
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
    </div>
    <div >
      <p> I want this cell's height same as the left "lorem ipsum" cell </p>
    </div>
  </div>
  <div >
    <div >
      <p> the second cell</p>
    </div>
    <div >
      <p> the second cell</p>
    </div>
  </div>
  <div >
    <div >
      <p> the 3rd cell </p>
    </div>
    <div >
      <p> the 3rd cell </p>
    </div>
  </div>
  <div >
    <div >
      <p> the 4th cell </p>
    </div>
    <div ></div>
  </div>
</div>

CodePudding user response：

just to add to LK77s good answer - is there any reason why you can't just use a <table> element here? That's the simplest solution.

failing that, a more modern solution is to refactor the HTML to take out the column divs, then you could use display: flex or display: grid to accomplish this:

.flex-table {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  border: 1px solid;
}

.flex-table p {
  margin: 0;
  flex: 0 0 50%;
  max-width: 50;
 }

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 600px;
  border: 1px solid;
}

.grid-table p {
  margin: 0;
  padding: 5px;
 }


/**
Just to show the different columns
**/
.table p:nth-child(2n) {
  background-color: rgba(255,0,0,.5);
}

<div >
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum second cell</p>
  <p>Lorem ipsum third cell</p>
  <p>Lorem ipsum fourth cell</p>
  <p>Lorem ipsum fifth cell</p>
  <p>Lorem ipsum sixth cell</p>
</div>
  
  
  <div style="margin-bottom: 30px"></div>
  
<div >
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum second cell</p>
  <p>Lorem ipsum third cell</p>
  <p>Lorem ipsum fourth cell</p>
  <p>Lorem ipsum fifth cell</p>
  <p>Lorem ipsum sixth cell</p>
</div>