Align images next to each other

Align images next to each other

I'm having trouble getting these two images lined up where I want them -
I'm trying to do a grid style-display but for some reason (despite using
display: inline) the images are appearing on separate lines.
I tried editing the width of the "figure" element (since I guessed that
was what the problem was) but it just shrunk everything down instead of
what I wanted - could anyone help me out?
HTML
<div id="blade" class="tab-content">
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<figcaption class="item_price">$17,000</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<figcaption class="item_price">$1,682</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
</div>
CSS
.mini-img {
width: 20%;
cursor: pointer;
}
.builder {
height: 20%;
text-align: center;
padding-bottom: 10px;
width: 50%;
}
.builder fieldset {
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.builder fieldset legend {
text-align: left;
}
.tab-content {
margin-top: 10px;
}
.tab-content #simpleCart_shelfItem {
display: inline;
}
.tab-content #simpleCart_shelfItem .item_name {
display: none;
}
.tab-content #simpleCart_shelfItem figure {
width: auto;
}
I was trying to achieve a sort of "caption" effect under each separate
image, but I still wanted the images lined up in a sort of "grid" format -
I got the first part done (obviously) but it's the second part that's
giving me trouble. I was hoping to avoid using a table, but I'm not sure
if that would be more suited for this or not.
jsFiddle