<div className='grid grid-cols-12 gap-12 mb-8'>
<div className='col-span-8'>
<div className='box'></div>
</div>
<div className='col-span-4'>
<div className='box'></div>
</div>
</div>
Displayed above is the snippet of HTML code I have implemented using the Tailwind CSS framework. However, it seems like the elements are not rendering as expected.
https://i.sstatic.net/Qjjdx.png The issue arises when trying to position two elements side by side in a grid layout where one takes up 8 slots and the other occupies 4 slots, totaling 12. Instead of appearing next to each other, the elements stack vertically for some reason.
The CSS styling applied to the element with the class "box" is quite simple:
.box{
background-color: #2b2d40;
height: 100px;
width: auto;
}
My query is regarding how can I adjust the layout so that these elements display side by side within the same row as originally intended?
Any insights or solutions would be greatly appreciated. Thank you!