After attempting to rotate elements with varying widths, I noticed that two elements were not in their proper places after being rotated and stacked. Even when I tried adjusting the CSS positioning of the elements based on their placement post-rotation, they still ended up stacked inaccurately.
https://i.sstatic.net/OkPki.png
.drop{
border: 1px solid gray;
width:50px;
height:200px;
margin:50px;
}
.drop div{
transform:rotate(90deg);
margin:0 auto;
padding:0 auto;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="drop"> <div class="box1 bg-warning" style="width:50px;height:50px;"></div> <div class="box2 bg-dark" style="width:75px;height:50px"></div> <div class="box3 bg-danger" style="width:100px;height:50px"></div></div>
https://i.sstatic.net/rq15J.png
I aimed for a specific outcome where, despite rearranging the elements, the display remained organized.