How to make an animated sidebar with content width reduced?

Question

css

Tell me how to make an animated sidebar so that when it opens the main content narrows in width.
And, accordingly, when it hides, the content becomes full width.

Sketched a minimum
of codepen.io/ttomoday/pen/LpWOxw

Answer 1

Try: codepen.io/anon/pen/BoWmRR
Fixed the layout, added js to the button and css transitions to animate the sidebar/content.