How to align the text next to the image?

advertisements

I have seen many topics on this around Stackoverflow, but I still could not find out how to do this on this particular case.

I am trying to display a list in a card fashion, I have a template I developed. It looks like this:

Here I have 3 cards, and in the first one, I displayed where I think divs should be created

I cannot align the text the way I want. I want the Title on top of the Description and both aligned right of the first image. But so far I have gotten nowhere. I have a JSFiddle of what I have so far right here: http://jsfiddle.net/MEaze/

Sorry about the ugly colors, I just needed to "see" the divs.


Make them float, and use div instead p.

.trophy-image {
    float: left;
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
}

.trophy-info {
    float: left;
    background-color: #00FF00;
    margin: 8px;
    line-height: 28px;
}

updated jsFiddle