I am looking to design a grid with two columns, where on small and larger screens the width of the right column adjusts itself to accommodate its content, while the left column takes up the remaining space. On extra small screens, the layout changes to two rows.
<div className='row' >
<div className='col text-light bg-success'>
large left column
</div>
<div className='col-sm-auto' >
right column
</div >
</div >
On screens equal or larger than small (sm), it appears as shown in the image:
https://i.sstatic.net/pI7Ax.png
On extra small (xs) screens, it looks like this:
https://i.sstatic.net/C0ing.png
This is the desired layout, but if there is another row within the right column containing two subcolumns:
<div className='row' >
<div className='col text-light bg-success'>
large left column
</div>
<div className='col-sm-auto' >
<div className='row row-cols-sm-1' >
<div className='col text-light bg-secondary'>subcolumn</div>
<div className='col text-light bg-primary '>subcolumn</div>
</div>
</div >
</div >
https://i.sstatic.net/H0Bui.png
The width of the right column now seems too wide to fit both subcolumns side by side. How can I make the right column adjust its width based on the widest subcolumn?