My website features a div element on the left side with a fixed width of 300px. Next to it, I aim to have another element that adjusts its width dynamically depending on the user's browser window size. To achieve this flexibility, I am using the Bootstrap grid system with col-12. Here is an illustration:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with the class "col-12" should sit directly beside the left div without any space in between and expand towards the right as the window is resized.
Unfortunately, I am encountering an issue where the second div always appears below the first one, despite setting a fixed width for the left element and a flexible col-12 for the right. Can you suggest a solution to make them align properly? Thank you in advance!