How to achieve this layout using bootstrap

Question

This is one row split into 2 columns however I when I try to get the section circled in red, it aligns to the top of the row, the progress bar doesn't align in the middle. I have seen code which speaks to creating custom css to handle that area but I am trying to find the simplest solution using bootstrap while creating as little custom css as possible.

Here is the code I am currently using.

 <div class="row">
                        <div class="col-md-12 ">
                            <div class="row">
                                <div class="row-height">
                                    <div class="col-md-8 col-xs-12 col-height col-top">
                                    <h1>
                                        Guardian Standard
                                    </h1>
                                    <p>
                                        Short description of Guardian plan goes here.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
                                    </p>
                                </div>
                                    <div class="col-md-4 col-height col-middle ">
                                        <span class = "visible-lg">
                                            <h3 class="progress-title">Coverage: </h3><div class="progress progress-width text-center"><div data-percentage="0%" style="width: 100%;" class="progress-bar progress-bar-custom" role="progressbar" aria-valuemin="0" aria-valuemax="100">Best</div>
                                    </div>
                                        <br><br><br>
                                    <h3 class ="progress-title">Premium:</h3> <h3>$$$$</h3>
                                </span>

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

Answer 1

You can simply do that using bootstrap built-on classes row and col. all you need to do is identify the column structure. here is the code structure i build.

<div class="container">
   <div class="row">
     <div class="col-md-8"></div> <!-- left bar -->
     <div class="col-md-4"> <!-- right bar -->
        <div class="row">
           <div class="col-md-4">Coverage :</div>
           <div class="col-md-8"></div> <!-- progress bar -->
        </div>
        <div class="row">
           <div class="col-md-4">Premium :</div>
           <div class="col-md-8">$$$$$</div>
        </div>
     </div>
  </div>
</div>

Here is the working example I created to test this code. for additional alignments i used custom css codes.