Sounds like you may end up with a few different loops and possibly some Conditional Tags.
You could, for example, have in one of your loops a Conditional element in your loop that says something like:
if the category equals ‘coffee’
apply class ‘slim’ to the containing element
otherwise, apply class ‘fat’
You’d probably need to mess around with it to see where all the snags might be. One possible problem would be that if you need two slim elements together, you’ll have to work out the best way to ensure that this happens.
This could require multiple loops for the page, or just some fancy conditions in your loops.
Sounds like you have an idea how to do this.
Regarding the layout, I’d definitely use a CSS layout and create two columns, one for the main content (left) and another for the subcontent (right). Then, within the right subcontent area, I’d mess with your loop code and use floats and clears to make it fall into place.
When you’ll have two slim elements right next to each other, you can either wrap them both in a div, or creatively use padding to create the top and bottom borders.
Make sense?
