title: How to divide bootstrap col-md div to half vertically?
body: <p>I am trying to make below layout using bootstrap grid. There is a container <code>&lt;div class="row"&gt;</code> and half width two divs in that (<code>&lt;div1&gt; and &lt;div2&gt;</code>). The <code>&lt;div1&gt;</code>'s height would be changeable as content size. And again, the <code>&lt;div2&gt;</code> should have two child divs(<code>&lt;div2-1&gt;, &lt;div2-2&gt;</code>) that half height of <code>&lt;div1&gt;</code> each. How can I make this layout with Bootstrap grid?  </p>
  
  <p><a href="https://i.stack.imgur.com/HyBxT.png" rel="nofollow"><img src="https://i.stack.imgur.com/HyBxT.png" alt="enter image description here"></a></p>
  
  <p>I tried like that, but not working. : </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6" id="div1"&gt;
          Some content...
      &lt;/div&gt;
      &lt;div class="col-md-6" id="div2"&gt;
  
          &lt;div id="div2-1" style="height:50%;"&gt;
  
          &lt;/div&gt;
          &lt;div id="div2-2" style="height:50%;"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>