JSFiddle - React, Tailwind, and code Playground

by Oussama ELGOUMRI

HTML

parent div height
<input type="numeric" id="parent-div-height" />

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
    <div class="child-4"></div>
</div>

CSS

#parent-div-height {
    margin-bottom: 30px;
}

.parent {
    height: 100px;
}

.child-1 {
    background-color: red;
}

.child-2 {
    background-color: blue;
}

.child-3 {
    background-color: green;
}

.child-4 {
    background-color: yellow;
}

JavaScript

var parent_height = $('.parent').height();
$('.parent div').height(parent_height / 4);

$('#parent-div-height').keyup(function(event) {
    value = $(this).val();
    
    $('.parent div').height(value / 4);
});