Aligning texts using bootstrap grids and css with json - css

Question

So heres my situtation, after I layed out the correct alignments of this emergency contact details of countries, I tried adding json to it. Unfortunately json scambled up my texts. I tried using another col grid inside "col-md-12" to no avail. I also tried bootstrap pull-right and pull-left but the hotline name and the number still does not align properly. I would like to have some advice to what can be done to position the texts.
Here is what its supposed to do: (imagine the flag is in the left side and the number are supposed to be aligned like a column)
Brunei
Ambulance: 991
Police: 993
Fire and Rescue: 995
Search and Rescue: 998
................................................................................................
Here is the current mess of text:
mess of hotlines
Thank you for the time and cooperation to anyone responding
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6 services-margin" ng-repeat="service in services | filter:search">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
<div class="country-title col-md-3" ng-bind="service.country"></div>
<p class="col-md-3" ng-bind="service.hl1"></p>
<span class="pull-right" ng-bind="service.hl1num1"></span>
<span class="pull-right" ng-bind="service.hl1num2"></span>
<span class="pull-right" ng-bind="service.hl1num3"></span>
<p ng-bind="service.hl2"></p>
<span class="pull-right" ng-bind="service.hl2num1"></span>
<span class="pull-right" ng-bind="service.hl2num2"></span>
<span class="pull-right" ng-bind="service.hl2num3"></span>
<p ng-bind="service.hl3"></p>
<span class="pull-right" ng-bind="service.hl3num1"></span>
<span class="pull-right" ng-bind="service.hl3num2"></span>
<span class="pull-right" ng-bind="service.hl3num3"></span>
<p ng-bind="service.hl4"></p>
<span class="pull-right" ng-bind="service.hl4num1"></span>
<span class="pull-right" ng-bind="service.hl4num2"></span>
<span class="pull-right" ng-bind="service.hl4num3"></span>
</div>
</div>
</div>

Answer 1

To align the image to the left and have the content on the right I would use the media object
and for proper alignment to right, why not use tables?
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<table class="table">
<tr>
<td ng-bind="service.hl1">Service 1</td>
<td style="text-align:right">
<div ng-bind="service.hl1num1">111</div>
<div ng-bind="service.hl1num2">222</div>
<div ng-bind="service.hl1num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl2">Service 2</td>
<td style="text-align:right">
<div ng-bind="service.hl2num1">111</div>
<div ng-bind="service.hl2num2">222</div>
<div ng-bind="service.hl2num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl3">Service 3</td>
<td style="text-align:right">
<div ng-bind="service.hl3num1">111</div>
<div ng-bind="service.hl3num2">222</div>
<div ng-bind="service.hl3num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl4">Service 4</td>
<td style="text-align:right">
<div ng-bind="service.hl4num1">111</div>
<div ng-bind="service.hl4num2">222</div>
<div ng-bind="service.hl4num3">333</div>
</td>
</tr>
</table>
</div>
</div>
</div>
https://jsfiddle.net/ktbmLaq8/