2カラムスタイルのテスト

以下のスタイルを追加し

div.box {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: flexbox;
}
div.boxLeft {
    min-width: 50%;
}
div.boxRight {
    min-width: 50%;
}
pre.code {
    min-height: 50px;
}

コードブロックの上下に、box, boxLeft, boxRightを追加することで、
左にコードを書き、右で説明する的な記事が書けます。

<div class="box">
  <div class="boxLeft">
＞|javascript|
function fn() {
}
||＜
  </div>
  <div class="boxRight">
＞|javascript|
なにもしないよ
||＜
  </div>
</div>

function noOperation() {
}

なにもしないよ

ChromeとSafariとIE10で2カラム表示されます。Firefoxはよくわかりません

こういうやり方もありますね

div.flexbox {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: flexbox;
}
div.flexbox>pre.code:nth-child(1) {
    min-width: 50%;
}
div.flexbox>pre.code:nth-child(2) {
    min-width: 50%;
}


<div class="flexbox">
＞|javascript|
function noOperation() {
}
||＜
＞|javascript|
なにもしないよ
||＜
</div>

function noOperation() {
}

なにもしないよ