Trying to set faux height on div

Question

I am trying to resolve this conundrum at the moment - without success.

The image represents a list of products. The first 3 items in the list are actual products - the white border is an A element and the red is an IMG element.

Each A element is encased by an LI element as shown below.

The width of each A is constrained by the LI - and the LI's parent are fluid so it's all done as a percentage.

I want to create a faux element at the end but instead of a product image, It will contain text to the effect "Explore (n) favourites". Setting the width isn't a problem, but i'm having issues setting the exact height due to the fluidity of the layout.

Any ideas as to how I can approach this?

All advice appeciated.

    <ul>
    <li>
        <a><img /></a>
    </li>
    <li>
        <a><img /></a>
    </li>
    <li>
        <a><img /></a>
    </li>
        <li>
        <a>this is not a product</a>
    </li>
</ul>

.favourites-widget ul
{
}

.favourites-widget li
{
    .BoxSizing;
    float:left;
    margin-bottom:1rem;
    padding-right:0.5rem;
    width:50%;
}

.favourites-widget li:nth-child(even)
{
    float:right;
    padding:0 0 0 0.5rem;
}

.favourites-widget li a
{
    display:block;
}