"Pill" with thumbnail and link

I'm currently trying to display a list of movies with this pill-like elements. The code below works but I guess there is a better way or a way to use elements from the twitter Bootstrap. It also bothers me that the date in the brackets isn't centered with the heading.

Please give me feedback how you like my code. I'm always open for any improvements or ideas :)



.pillLink > h {
display: inline-block;
}

.pillLink {
display: inline-block;
padding-left: 20px;
}

.pill > #cover {
height: 100px;
outline: 2px solid white;
}

.pill {

padding: 7px;
margin: 10px;
width: 500px;
background-color: silver;
-webkit-border-radius: 7px!important;
-moz-border-radius: 7px!important;
border-radius: 7px!important;
border: 1px solid grey
}










Interstellar
(2014)




The id attribute must to be unique per document. So I think that using ID for the cover image is wrong under the assumption that you may have many pills per page with covers.

I believe that using a class cover would be better in this case. You can still use .pill > .cover selector in the same way to only select covers under pills.

StackExchange Code Review Q#116111, answer score: 4