Leave two Divs always with the same height [duplicate]

I found a solution in this article: " Bootstrap 3 responsive columns of same height ". It creates a set of classes to ensure that all columns in a row have the same height. The ones 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><scriptsrc="//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 "All Page" to see the effect. I put% s of% s with div so you can edit them and see how the content fits the height of the largest column, plus a border to assist in visualization, those artifacts should not be present in the actual code. p>     

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

NO 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*/