bootstrap spaceing issue during display of multicolumn texts - html

Question

I have the following code below, but i am having problem with the spacing. I am using bootstrap. How can i have the title and the value eg " Leonard Moonsoooon". be only 20 px away all the time ?
How can I reduce the spacing?
Senior Advisor Leonard Moonsoooon
Here is my code below and fiddle
FIDDLE
<div id="clientData">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-6 col-md-2OW">
<div class="name"><strong>Senior Advisor </strong></div>
<!--<div class="account"><strong> Prod </strong></div>
<!-- <div class="approved"><strong> Prod </strong></div>
<div class="activity"><strong> Last Activity </strong></div>
<div class="activity"rong> Risk Category</strong></div> -->
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="name">Leonard Moonsoooon</div>
<!--<div class="account">0789</div>
<!--<div class="approved">12/5/2015</div>
<div class="activity">4/1/2016</div>
<div class="riskcategory">
<div style="background:Yellow; padding:2px;height:18px; width:50px;"></div>
</div>--->
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-2 col-sm-3 col-xs-6 col-md-2OW12 thirdrdcolTitle">
<div class="brokerage"><strong> Company </strong></div>
<!--<div class="approved"><strong> Max Approved Loan Amt </strong></div>
<div class="balance"><strong> Loan Balance </strong></div>
<div class="credit"><strong> Available Credit </strong></div>
<div class="aging"><strong> Days in this Category </strong></div> -->
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="pledged "> YUMark</div>
<!--<div class="approved "> $2,050,877.82</div>
<div class="balance "> $1,849,000.00</div>
<div class="credit "> $201,877.82</div>
<div class="aging "> 3</div>-->
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-1 col-sm-1 col-xs-6">
<div class="account"><strong> Production </strong></div>
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<div class="pledged "> 2351</div>
</div>
</div>
</div>

Answer 1

You have some really funky html going on there. However, the easiest thing you can do is just place both values into one column div, instead of two.
.name strong{margin: 0 20px 0 0;}
<div class="col-md-4 col-sm-4 col-xs-12 col-md-2OW">
<div class="name"><strong>Senior Advisor</strong> Leonard Moonsoooon</div>
</div>
https://jsfiddle.net/pwku8qam/