I am working on creating a playlist display from our YouTube videos. I thought I had this working, but I am having some issues with how it displays. See code below.

If I used `display: block` the paragraph is next to the video like I want, but I can't add any padding after the video so that the videos don't together. When I use `display: inline-block` I can control the bottom padding, but then some videos will display next to each other.

What am I missing in my CSS?

```js
    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
        cache: false,
        dataType: "jsonp",
        success: function(json) {
          var entries = json.feed.entry;

          for (var i = 0; i < entries.length; i++) {
            $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
          }
        }
      });
    });
```

```css
    .videoElem {
      display: block;
      clear: both;
      padding-bottom: 25px;
    }
    .ytVideo iframe {
      float: left;
      padding-right: 10px;
    }
    @media only screen and (max-width: 648px) {
      .ytVideo iframe {
        width: 100%;
        height: 100%;
      }
    }
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>
```