I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:

----------------------------
| photo | item description |
----------------------------

I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.

I have tried this:

.item{
  padding-left: 60px; // size of photo + 5px margin
  background-position: 5px 0px;
}

<div class="item" style="background-image: url('/img/photo123.jpg');">
  Here is the item description
</div>

That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?