How to put paragraph under each image when using owl-carousel?

Question

Below is my code

HTML

<div class="container">
<div class="row">
  <div class="col-sm-12">
    <div id="owl-demo">
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>

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

CSS

#owl-demo .item{
margin: 0px 5px 0px;
}
#owl-demo .item img{
  display: block;
  width: 50%;
  height: auto;
}

Javascript

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: false, //Set AutoPlay to 3 seconds
    items : 5,
    itemsDesktop : [1024,5],
    itemsDesktopSmall : [979,3],
    navigation : true,
    pagination : false,
    navigationText : ["<", ">"]
  });
});

I am using owl-carousel for slider and would like to add some text or paragraph under each image.Owl-carousel support responsive for slider so how to put paragraph under each image and also support responsive design? Here is my code on JSFIDDLE