JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentprofile">
    <div id="setaccountoptions">el contenido mas corto</div>
    <div id="optionselected">el <br/>contenido <br/>aqui <br/>es mas <br/>largo <br/>largo</div>
</div>

CSS

/* caja contenedora principal
 */
#contentprofile{
    width:900px;
    background:red;
    overflow:hidden;
}
 
/* caja de opciones que flota a la izquierda
 */
#setaccountoptions{   
    padding-top: 28px;
    padding-left: 15px;
    float:left;
    width:205px;    
    min-height:500px;
    background:green;
}
 
/* caja que muestra dinamicamente por php el contenido de la opcion escogida
 * (para aquellos que no entiendan: en esta capa se llama otra pagina dependiendo del id de la opcion escogida)
 */
 
#optionselected{
    width:630px;
    padding-top: 28px;
    float:right;
    background:yellow;
}

JavaScript

function dinamicheight(div1,div2){
    var height1 = document.getElementById(div1).offsetHeight - 28; //528 - 28(padding) = 500
    var height2 = document.getElementById(div2).offsetHeight;
    if (height2 > height1){
        document.getElementById(div1).style.height = height2 + "px";
    }
    else{
        document.getElementById(div2).style.height = height1 + "px";        
    }
}
window.onload = function() {
var div1 = "setaccountoptions", div2 ="optionselected";
    document.getElementById("optionselected").onclick = function(){
       dinamicheight(div1,div2);
    };
}