Implement various layouts for (part of) a web page

Question

I want to implement a coding playground. At the moment I am using flex-boxto determine the position of various panels. Here is the JSBin and its html part:

<div class="flex-box">
  <div class="col" id="html-panel">
    <p>html</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="css-panel">
    <p>css</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="js-panel">
    <p>javascript</p>
  </div>
</div>  

(To make it a playground, I add textareainside each panel(for example, html-textareato html-panel) and combine the contents of the three text areas to return the output. The playground responds to every change in the content in the text areas: I prefer to use the AngularJS controller rather than JQuery event handlers.)

, , . Liveweave, 4 (. ) , ,

• 3 ,
• 3
• 1 2
• 2 1

, // ?

, 1 .html, 1 .js 4 .css? .css ?

Answer 1

, , , /UI -Router/AngularUI/ Angular JS. html .

, @DCR: JS CSS. , , JS html, , innerHTML. 4 html 4 . 4 html , CSS (, ) JS.