Is there a way to automatically set the same height for #div1 and #div2 regardless of the size of my logo in Bootstrap3? If not, what would be the best CSS rules to achieve this?
<div class="masthead">
<!-- Logo + Site Title -->
<div class="row">
<div id="div1" class="col-xs-6" style="border:solid 1px;"><img src="http://drawception.com/pub/panels/2012/12-28/MnbfrYALQj-2.png" width="250" height="150" /></div>
<div id="div2" class="col-xs-6" style="border:solid 1px;"><h1>My website title</h1></div>
</div>
Edit: I ended up using this solution. Check it out here
A simple and elegant solution with just one bootstrap class 'list-inline'
This is how I implemented it in my code:
<div class="row">
<ul class="list-inline">
<li><img src="//placehold.it/150x50"></li>
<li><h1>My text</h1></li>
</ul>
</div>