How to divide bootstrap col-md div to half vertically?

Question

I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?

I tried like that, but not working. :

<div class="row">
    <div class="col-md-6" id="div1">
        Some content...
    </div>
    <div class="col-md-6" id="div2">

        <div id="div2-1" style="height:50%;">

        </div>
        <div id="div2-2" style="height:50%;">

        </div>
    </div>
</div>

Answer 1

Try this...

div {
  border: 1px solid black;
}
#div2-1,
#div2-2 {
  height: 50%;
  border: 1px solid red !important;
}
#div1,#div2{
  height:50px;
  
  }
#div2.col-xs-6
{
  padding:0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6" id="div1">
      Some content...
    </div>
    <div class="col-xs-6" id="div2">

      <div id="div2-1">

      </div>
      <div id="div2-2">

      </div>
    </div>
  </div>
</div>