I am working with a parent div where I am dynamically adding smaller divs with content to achieve a specific layout. Here's how the structure looks:
https://i.sstatic.net/tN1s1.png
The code for the parent div is shown below:
<div class="row" style="float: left;">
<div class="col-lg-12 col-md-12" id="parent">
</div>
</div>
And here is the code for the sub divs that are being appended inside the parent div:
<div class="col-lg-4 col-md-12" style="margin-top: 20px; padding: 10px; float: left;">
<fieldset class="border p-2">
<legend class="w-auto">Box</legend>
<div style="width: 576px; float: left;">
<button class="btn"><i class="fa fa-close"></i></button>
</div>
<label for="student">Student</label>
<span style="width: 576px;">
<select style="width: 100%;" id="student" class="form-control select2 w-100">
<option value="">Select Student</option>
<option value="1">Student1</option>
</select>
</span>
</fieldset>
</div>
I want these sub divs to be displayed next to each other inside the parent div, but there seems to be an issue with how the controls like the close button or select list are rendering in terms of width. I have added
style="width: 576px; float: left;"Thank you