Align borders of text div with image div

I have the following code using bootstrap 3:

<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
                JVM Infotech is a multifunctional company that can serve many of your educational needs.
            </div>
            <div id="test2" style=" border-style:double" class="col-lg-6" >
                <img  style="margin:auto" src="cinq1.jpg" class="img-responsive">
            </div>
        </div>
    </div>
</div>

The size of div test1 is based on the amount of text and fontsize of test1. So the bottom border does not automatically align with div test2. I am able to fix this by changing padding values of test1. But that means each change of text to test1 will require change of padding values as well which is not good stable coding. I thought the grid system of Bootstrap 3 would adjust for this so is there something I'm missing?

Solution

Without javascript you can achieve it-- It's a bootstrap experiment--the official experiment

you just need to add .row-eq-height with row class. and add the following css.

 .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
       </head>
       <body>
       <div class="row">
            <div class="col-lg-12">

        <div class="row row-eq-height" >
            <div id="test1" style="text-align:center; border-style:double; font-size:14px;" class="col-lg-6 ">
                JVM Infotech is a multifunctional company that can serve many of your educational needs.
            </div>
            <div id="test2" style=" border-style:double; " class="col-lg-6 " >
                <img  style="margin:auto" src="cinq1.jpg" class="img-responsive">
            </div>

        </div>
        </div>
    </div>
</body>
</html>

Note: it uses flex.