JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<div class="wrap">
	<div class="rightcol">
		<pre> //Code output </pre>
	</div>
	<div class="leftcol">
		<h1>Some Text here</h1>
	</div>
  <div class="clear"></div>
</div>

CSS

.wrap {
  clear: both;
 padding: 10px;
 margin: 20px;
 border: 1px solid #000;
 background: #fff;
}
.rightcol {
    width: calc(50% - 22px);
    background: #eee;
    color: #333;
    border: 1px solid #aaa;
    float: right;
    padding: 10px;
    display: inline-block;
    
    height: 200px; /*this is just for the fiddle*/
}
.leftcol {
  width: calc(50% - 22px);
  display: inline-block;
  padding: 10px;
}
h1 { margin:0; padding:0;}
.clear { clear: both; }