Layout Help w/ Chart and Slidebox

I would like to build a view layout that that breaks the screen into (3) vertical divisions.

  1. Top-most region to display a chart for a selected subject (35%)
  2. Middle region to display a slidebox for users to select subjects (15%)
  3. Bottom region to display a scrollable list of notes related to selected subject (50%)

I have been struggling with the layout and really need some help to get things setup. I am using Chart.js for the data presentation in a donut/pie chart. I have a codepen setup now w/ some dummy data. I just use a modulo on t he index to bounce between (2) datasets. In practice, the data would come from a service and be tied to the subject index selected in the slidebox. Help from any CSS/layout gurus or anyone that has monkeyed around w/ the Chart.js module would be greatly appreciated.

link to the code pen:

on a side note, there is something wrong w/ the slidebox in my codepen and it doesn’t want to slide on click/drag so I put buttons in the header connected to the delegate to allow advancing the slides.