JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div class="clearfix">
    <div class="documentation">Lorem ipsum</div>
    <div class="code">function () {
    var x;
}</div>
</div>
<div class="clearfix">
    <div class="documentation">Lorem ipsum dolor sit amet conseteur</div>
    <div class="code">function () {}</div>
</div>

CSS

body {
    width: 400px;
    margin: 0 auto;
    background: #eeeeee;
    background: -moz-linear-gradient(left, #eeeeee 0%, #eeeeee 50%, #cccccc 50%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(50%,#eeeeee), color-stop(50%,#cccccc), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
    background: -o-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
    background: -ms-linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
    background: linear-gradient(left, #eeeeee 0%,#eeeeee 50%,#cccccc 50%,#cccccc 100%);
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
* html .ui-helper-clearfix,
* html .clearfix {
    height: 1%;
}
:first-child + html .ui-helper-clearfix,
:first-child + html .clearfix {
    min-height: 1%;
}
.documentation {
    float: left;
    width: 190px;
}
.code {
    width: 200px;
    margin-left: 210px;
    white-space: pre;
}