I'm facing a challenge trying to display stacked divs in a column-like manner. Unfortunately, I can't directly edit the HTML due to the constraints of the application. The issue I'm encountering is that the right column is appearing lower down on the page instead of aligning with the top. Normally, I would enclose each section in a div and float or inline-block them to achieve the desired layout. However, using jQuery functions like .wrapAll() to add the necessary HTML directly to the document is not an option for me. Any assistance or recommended resources would be greatly appreciated. Thank you.
You can view an example of the code on this jsfiddle: https://jsfiddle.net/itivae/30xhjwcz/5/
<style>
.content-wrapper {
position: relative;
overflow: hidden;
}
.div-1, .div-2, .div-3, .div-4, .div-5 {
float: left;
width: 100%;
max-width: 48%;
clear: left;
position: relative;
}
.div-6, .div-7, .div-8, .div-9, .div-10, .div-11, .div-12 {
float: right;
width: 100%;
max-width: 48%;
clear: right;
position: relative;
}
</style>
<div class="content-wrapper">
<!--This is the left column-->
<div class="div-1">Content</div>
<div class="div-2">Content</div>
<div class="div-3">Content</div>
<div class="div-4">Content</div>
<div class="div-5">Content</div>
<!--End of left column-->
<!--Start of right column-->
<div class="div-6">Content</div>
<div class="div-7">Content</div>
<div class="div-8">Content</div>
<div class="div-9">Content</div>
<div class="div-10">Content</div>
<div class="div-11">Content</div>
<div class="div-12">Content</div>
<!--End of right column-->
</div>