Text pushes <div> down - css

Question

I'm creating a small shop in simple html. Each buyable item has its own box where I will later insert the item's name and picture.
My problem however, is when I enter an item name that takes 2 rows or more to fit, because then all other boxes get pushed down as well:
I have some 500 rows of code so I will just paste what I think is relevant to the problem:
CSS:
.packitem{
background-image: url("");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
}
.packitem a.boxlink{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.boxtext{
font-size: 16px;
font-family: verdana;
color: #fff;
vertical-align: top;
}
HTML:
<div class="packages1">
<div><font class="packfont">Packages</font></div>
<div class="packitem">
<div id="pack1" class="white_content">
<font class="descriptiontitle">Item 1</font>
<p class="descriptiontext">Dummy text</p>
<a href="javascript:void(0)" onclick="document.getElementById('pack1').style.display='none';document.getElementById('fade').style.display='none'">
<p class="closelink">Close</p>
</a>
</div>
<font class="boxtext">Item 1</font>
</div>
I managed to fix the issue by having display: inline-flex instead of display: inline-block, but that messed text-alignment up.
Any ideas of what's wrong?
Thanks.

Answer 1

You are close but vertical-align: top; should be applied to the items that are to align.
In your case this should be the boxes
.packitem{
background-image: url("http://www.dedicatedrejects.com/pics/blockblue.jpg");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
vertical-align: top;
}
BTW: <font class="descriptiontitle">Item 1</font> should not be used...it's invalid HTML
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font