css - 定位绝对元素以保留在文档流中，但以某种方式将元素推到下方

Question

请在 jsfiddle 中找到我的脚本来显示问题

忽略外观，因为我必须删除页面的许多其他部分才能将其放在 jsfiddle 上。

事实是

1. Bottom Callout should appear on clicking Latest or Date range
2. On displaying the callout, the buttons should be pushed down accordingly, 
    wrt to the height of the callout
3. The callout is positioned after the Latest/DateRange in order to keep it continuos in the document flow
4. The callout is positioned absolute to avoid the white space that shows next to "Latest",
    this white space is created by the width of the bottom callout if positioned relative.

问题：我想找到方法

1. to keep the callout in the document flow
2. no white space should be shown next to Latest, when clicking on Latest 
3. the buttons at the bottom should be pushed down rather  than getting hidden.

如果您有任何想法或需要有关该问题的更多信息，请告诉我。

提前致谢。