css - Twitter Bootstrap panel height increases when resizing window -

I have a problem where the height of my panel increases dramatically when I reduce window size especially , I have two panels in one line - one is - col-grid-5 and the other is col-grid-4. Call-grid-4 header height (another one below the recent active projects) is the one that is growing more than it needs. Here's a planner:

  & lt; Div class = "col-md-5" & gt; & Lt; Div class = "panel" & gt; .... & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; Div class = "panel" & gt; .... & lt; / Div & gt; & Lt; / Div & gt;  

If you resize the window of the planner, you will see that it happens during a fixed window width limit. If I rearrange tables then the problem gets resolved (i.e. put the second first) However, I do not understand why this works.

Any tips will be great!

This is a float clearing issue that gives you your nested .col-sm-6 You must include another .row tag around. The simple answer is that whenever you have a set of columns in the bootstrap, you need a line around them.

  & lt; Div class = "col-md-5" & gt; & Lt; Div class = "panel" & gt; & Lt; Div class = "panel-title not border bg-primary" & gt; & Lt; Span class = "text-lt" & gt; Time Summary & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "panel m-n col-sm-6-padder-v" & gt; Hours today & lt; I class = "icon-arrow-right-pull-right m-t-LG" & gt; & Lt; / I & gt; & Lt; Div class = "h2b-bm-t-sm" & gt; 2.50 & lt; / Div & gt; & Lt; / Div & gt; ... & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Updated plunker: