title: Bootstrap 3: simple vertical align 2 divs
body: <p>I would like to give automatically the same height for #div1 and #div2 whatever my logo size is. Is there a specific Bootstrap3 class to do the job ? If not which is the best css rules to apply ?</p>
  
  <p><a href="https://jsfiddle.net/bzq9bhop/4/" rel="nofollow">https://jsfiddle.net/bzq9bhop/4/</a></p>
  
  <pre><code>&lt;div class="masthead"&gt;
      &lt;!-- Logo + Titre du site --&gt;
      &lt;div class="row"&gt;
          &lt;div id="div1" class="col-xs-6" style="border:solid 1px;"&gt;&lt;img src="http://drawception.com/pub/panels/2012/12-28/MnbfrYALQj-2.png" width="250" height="150" /&gt;&lt;/div&gt;
          &lt;div id="div2" class="col-xs-6" style="border:solid 1px;"&gt;&lt;h1&gt;My website title&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Edit: Finally I used this solution. <a href="http://www.bootply.com/wr4u8YOFpj" rel="nofollow">http://www.bootply.com/wr4u8YOFpj</a></p>
  
  <p>Simple and elegant with only 1 bootstrap class list-inline</p>
  
  <p>Which in my code gives:</p>
  
  <pre><code>            &lt;div class="row"&gt;
                  &lt;ul class="list-inline"&gt;
                      &lt;li&gt;&lt;img src="//placehold.it/150x50"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h1&gt;My text&lt;/h1&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>