I need to design a responsive navigation and search bar container row with a 3 column-wide logo on the left (comprised of two horizontal columns) and a 9 column-wide navigation and search bar on the right (also made of two horizontal columns - navigation on top and search bar on bottom). It's crucial that all these columns have the same height on various devices. Please refer to the image for the current and desired outcome:
I've attempted to use w-100 and set the height to 100%, along with trying different Bootstrap techniques to ensure equal heights for all columns, but I'm struggling to achieve the desired result. Manually setting the column height won't be effective across multiple devices. As I'm not a Bootstrap expert, there may be a fundamental flaw in my approach to this design.
<div class="row">
//container for the two columns on the left, containing both parts of the logo
<div class="first-container col-lg-3">
<div class="row d-flex flex-column">
<div class="col-lg-12 w-100">
<img src="public/img/....png" alt="logo-desktop" class="w-100" />
</div>
<div class="col-lg-12 w-100">
<img src="public/img/....png" alt="logo-desktop" class="w-100" />
</div>
</div>
</div>
//container for the two columns on the right, containing the navigation and search bar
<div class="second-container col-lg-9">
<div class="row d-flex flex-column ">
<div class="col-lg-12">
<nav class="navbar navbar-inverse navbar-toggleable-md">...
//navigation bar
</nav>
</div>
<div class="col-lg-12">
//search bar
</div>
</div>
</div>
</div>
The expected outcome should match the image provided. Thank you for any assistance!