Align multiple elements across bootstrap columns in the same row
<p>I would like to horizontally align multiple items across two columns within the same row in bootstrap. An example HTML Code can be found below:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6"&gt;
        &lt;h1&gt;Short Heading&lt;/h1&gt;
        &lt;p&gt;Some super long content that will push the button far downward so that it will certainly not align with the next column anymore&lt;/p&gt;
        &lt;button class="btn btn-primary"&gt;Button&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-6"&gt;
        &lt;h1&gt;Super long Heading that requires 2 rows&lt;/h1&gt;
        &lt;p&gt;Some short content&lt;/p&gt;
        &lt;button class="btn btn-primary"&gt;Button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>or in this fiddle <a href="http://jsfiddle.net/6pYhx/689/" rel="nofollow">http://jsfiddle.net/6pYhx/689/</a> </p>

<p>Within the example, I would like to have 2 conditions</p>

<ol>
<li>The header, p and button elements should be on the same horizontal height. In my example the right header is two rows, therefore the right p element is one row lower than the left p</li>
<li>If the screen size shrinks, all elements of column 1 should be right below each other, followed by all elements of column 2 -> I tried to solve it by having multiple rows, but then you'd have header 1, header 2, p 1, p 2, ... Instead I would like to have header 1, p 1, button 1, followed by header 2, p 2, button 2</li>
</ol>

<p>Any ideas how to solve it with CSS?</p>