Bootstrap 3 Text on the right of thumbnails - html

Question

I have a question, basically using the thumbnails is ok, and you can get text beneath the tumbnail but i would like to put like 3 tags next to the thumbnail, something like that and would like to have:
Or those parameters outside of the border, but the border should be very close to the thumbnail ...
The code is following:
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
<ul>
</a>
</div>
From the post and responses i get the following in the fiddle, as well as in my solution, i marked it yellow, as you can see the border is somehow on the top now :( :
This is final screen, still broken: :(

Answer 1

The problem is that default bootstrap display property is set to block. Just change it to inline-flex or inline-block and thats it. For example:
<div id="someId" class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>
Just set id and in css write
#someId .thumbnail{
display: inline-flex;
}

Answer 2

that's quite easy, just divide the region in 2 equal parts and fill in the contents.
http://jsfiddle.net/fatgamer85/D5M7E/3/
<div class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>