Two div with same class name overlapping each other

Question

On clicking a button my program will create a dynamic div with a class name dynamictextbox . There is a label with the class name mytxt and textbox with class name mytext inside this div which is also dynamically created.

When i create a new dynamic div it is overlapping with previously created div.

Below is the CSS i've used

.dynamictextbox{
width:50%; 
position:relative;
padding:10;
}
.dynamictextbox .mytxt{
position:absolute;
left:0px;
right:50%;
}
.dynamictextbox .mytext{
position:absolute;
left:51%;
right:100%;
}

Below is the HTML code

 <div id="Enter your name" class="dynamictextbox">
     <label class="mytxt">Enter your name</label>
     <input type="text" name="Enter your name_name" id="Enter your name_id" class="mytext">
 </div>
 <br />
 <div id="bigData" class="dynamictextbox">
     <label class="mytxt">Now this is a long text which will overlap the next div.Need solution for this. Please give me a solution for this</label>
     <input type="text" name="bigData_name" id="bigDate_id" class="mytext">
 </div>
 <br />
 <div id="div_temp" class="dynamictextbox">
     <label id="txtlb" class="mytxt">Dynamic Label</label>
     <input type="text" name="tb" id="tb" class="mytext">
 </div>
 <br />

Answer 1

What you need here, is to expand the element according to the content height. Unfortunately you cannot do this using CSS. So we'll have to move along with javascript.

Here goes the script

<script>
    var max = 0;
    function setHeight() {
        var elements = document.getElementsByClassName('mytxt');
        var height = 0;
        for (var i = 0; i < elements.length; i++) {
            height = elements[i].scrollHeight;
            if (height > max) {
                max = height;
            }
        }

        elements = document.getElementsByClassName('dynamictextbox');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style = "min-height: " + max + "px";
        }
    }
</script>

At the end of all the divs call the funtion setHeight().

<script>setHeight()</script>

So the output will look like this

P.S. I've added borders to the class dynamictextbox for testing purposes.