Need help with overflow on wiki app

1

All,

I’m so close to finishing the wiki app that I can feel it: so close yet so far away! I ran into an issue with my original tabular structure where the Wikipedia extract row height was just a tiny bit smaller than its sibling’s title row height. Couldn’t figure out a solution on my own and the only advice I got was to not use the tabular format.

Well, I made some decent progress in creating a table-like format with divs but am having issues with text overflow in the titles and also in the extract portion where the right border disappears.

  1. Applying the overflow property to the titles portion (left side) causes all kinds of havoc with row alignment.
  2. Tried applying display: table to the container, display: table-row to the class block and display: table-cell to the links and titles classes but it seems impossible to add any margin or padding afterwards. The text goes all the way to the right edge of the screen and completely bypasses any preset margins.
  3. Also tried some white-space properties which wrapped the title text but then that lead to mismatching row heights with its sibling.

Anyways, here’s my original with table elements: http://codepen.io/FatherWeebles/full/QGpZxb/. Got so close with this one!
Here’s the latest iteration of the div-table structure: https://codepen.io/FatherWeebles/full/ZLOMMV/. This is better than the above and is the one I need help with.

1) How would you go about stopping overflow in the titles section? For example, search "New York."
2) How would you go about fixing the lack of right borders in the extract section to the right?

Would prefer to avoid using any JavaScript but want to wrap up this project so ears are wide open.