How to configure div width as a function of height


My HTML code

<div class="persoonal">
    <div class="left"></div>
    <div class="rigth"></div>

My CSS code

.profile {
width: 100%;}

.left {
width: 50%;
float: left;
height: auto;
display: inline-block;}

.rigth {
float: right;
width: 48%;
height: 100px;
display: inline-block;}

I am new to HTML,

I want to give the left div width 50% when the right div's height is 100px, and I want to give that same left div width 100% when its height is above 100px.

Any advice? Thanks in advance.

you can do this by jquery,

    var div_width = $( ".left" ).width();
var r_div_height = $( ".right" ).height();
if(r_div_height == '100')
    $( ".left" ).width('50');
if(div_width == '100')
    $( ".left" ).width('100');

This way you can do it.