How to make top line shorter than bottom line (within div)

I have an unordered list which contains 3 list items (represented in my example as 3 green boxes). Each box has an image and 3 divs (title,location,price). I'm only concerned with each box's title div.

If the title is long enough so that it produces 2 lines, I want the top line to always be shorter than the bottom line. My demo site seen here shows boxes 1 & 2 with the wrong setup, and box #3 shows the correct setup.

I'm having trouble... this may require js to determine line length and then set the bottom line to be longer. Screen resolution will likely play a role but can't I make the lines consistent across different screen sizes?

Here is one of the list items, I'm interested in the div "titlebox":

<li class="list__item">
            <figure class="list__item__inner">

   <p class="vignette" style="background-image:url(http://ift.tt/1IAVFJO)"></p>
   <div class="titlebox">This line is longer than this line</div>
   <div class="locationbox">Location</div>
   <div class="pricebox">Price</div>

</li>

Any help is great, thanks!!

Screenshot attached too: