Leave two Divs always at the same height

Question

I’m using bootstrap, I’ve tried using display:table-cell and display:cell in divs children, however, nothing worked, I have two divs, and both have dynamic content, but I need the two always stay the same size.

<div class='row'>
 <div class='col-xs-12 col-sm-5'>
  CONTEUDO 1
 </div>
 <div class='col-xs-12 col-sm-7'>
  CONTEUDO 2
 </div>
</div>

Answer 1

I found a solution in this article (in English): "Bootstrap 3 Responsive Columns of same height". It creates a set of classes to ensure that all columns in a row are the same height. Those that interest you in this case are:

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

(there are others for the other resolutions - xs, md and lg - as well as others that give you different types of control)

Example:

.row div {
    border: 1px solid black; // Para visualização; não usar na prática
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container'>
<div class='row row-same-height'>
 <div class='col-xs-12 col-sm-5 col-sm-height' contentEditable="true">
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
 </div>
 <div class='col-xs-12 col-sm-7 col-sm-height' contentEditable="true">
  CONTEUDO 2
 </div>
</div>
</div>

See the example in "Whole page" to see the effect. I put the divs with contentEditable so you can edit them and see how the content adapts to the height of the largest column, plus an edge to assist in visualization, these tricks should not be present in the actual code.

Answer 2

In bootstrap you are not necessarily obliged to just use it. You can customize it. And one way to solve your problem is: Add a new class to both Divs and then create a style for such a class:

IN HTML:

<div class='row'>
 <div class='col-xs-12 col-sm-5 minha-classe'>
  CONTEUDO 1
 </div>
 <div class='col-xs-12 col-sm-7 minha-classe'>
  CONTEUDO 2
 </div>
</div>

And the CSS:

.minha-classe { min-height: 100px; height:150px; max-height:200px; } /* altura mínima de 100px, altura normal de 150px altura máxima de 200px*/