Display settings to make images take up a whole line of a div

Display settings to make images take up a whole line of a div

I've got some CSS that looks like
.drugCard
{
width:280px;
height:375px;
border: 10px solid;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
text-align:center;
float:left;
}
.drugCard span
{
display:block;
border-bottom:2px solid #ccc;
font-size:xx-large;
}
.drugCard img
{
padding:2px 2px 2px 2px;
border: 1px solid black;
clear:both;
display:inline-block;
}
with output that looks like
You can see in the right picture were there are three pictures the date is
present at the bottom of the pictures. This is because those three
pictures fill up the div completely. What CSS do I need to make the date
always appear on a new line?
These are .NET-generated controls so I would prefer a one-liner CSS if
there is one vs. manually editing the HTML. Currently the date you see is
added as literal text to the page. EDITED to add markup:
<div class="drugCard" style="border-color:Chocolate;">
<span>BISCOLAX</span><img src="Images/Nausea.jpg"
style="height:75px;width:75px;" />11/19/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:DarkOrange;">
<span>RENAGEL</span><img src="Images/Pain.jpg"
style="height:75px;width:75px;" /><img src="Images/Sleepiness.jpg"
style="height:75px;width:75px;" /><img src="Images/UpsetStomach.jpg"
style="height:75px;width:75px;" />11/9/2012 12:00:00 AM
</div><div class="drugCard" style="border-color:MediumAquamarine;">
<span>VYVANSE</span><img src="Images/Sleepiness.jpg"
style="height:75px;width:75px;" /><img src="Images/Fever.jpg"
style="height:75px;width:75px;" /><img src="Images/Nausea.jpg"
style="height:75px;width:75px;" />1/29/2013 12:00:00 AM
</div>