JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controller-container">
  <label>
    <input type="radio" name="flexoption" value="flex-start" checked /> flex-start
  </label>
  <label>
    <input type="radio" name="flexoption" value="flex-end" /> flex-end
  </label>
  <label>
    <input type="radio" name="flexoption" value="center" /> center
  </label>
  <label>
    <input type="radio" name="flexoption" value="space-between" /> space-between
  </label>
  <label>
    <input type="radio" name="flexoption" value="space-around" /> space-around
  </label>
  <label>
    <input type="radio" name="flexoption" value="space-evenly" /> space-evenly
  </label>
</div>
<style class="css-container"></style>
<code class="language-css"></code>
<div class="flexbox-container">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS

.controller-container{
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.container{
  height: 200px;
}


html, body{
  min-height: 450px;
  margin: 0;
  padding: 0;
  background-color: #cccccc;
}

label{
  display: block;
  padding: 5px 0;
  cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.controller-container{
  padding: 15px;
}

.language-css{
  border-radius: 0 !important;
  padding: 15px !important;
  display: block !important;
  white-space: pre !important;
}


.flexbox-container{
  padding: 15px;
}

.container, .item{
  border: 3px solid black;
}

.container{
  background-color: #0066ad;
  padding: 5px;
  counter-reset: itemcounter;
}

.item{
  background-color: #a2cff0;
  min-height: 30px;
  min-width: 30px;
  position: relative;
  font-weight: bold;
  color: black;
  font-size: 20px;
}

.item::after{
   content: counter(itemcounter);
   counter-increment: itemcounter;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


















/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=css */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size:...

JavaScript

const styleContainer = document.querySelector('.css-container'),
	codeContainer = document.querySelector('.language-css'),
  initialCode = `
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
`;
  
  
  
const controllerContainer = document.querySelector('.controller-container');

controllerContainer.addEventListener('click', () => {
	const justifyContent = document.querySelector('input[name="flexoption"]:checked').value;
	let code = `
   display: flex;
   flex-direction: column;
   justify-content: ${justifyContent};
	`;
  setCode(code);
})
















function startCode(){
	try{
  	setCode(initialCode);
  }catch(e){
  	setTimeout(() => {
    	startCode();
    }, 100);
  }
}

startCode();

function setCode(code){
	code = `.container{
   ${code.replace(/^\s+|\s+$/g, '')}  
}`;
	styleContainer.innerText = code;
  codeContainer.innerHTML = getCSSHighlight(code);
}

function getCSSHighlight(code){
	return Prism.highlight(code, Prism.languages.css, 'css');
}



/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=css */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e,t){var a=n.util.type(e);switch(t=t||{},a){case"Object":if(t[n.util.objId(e)])return t[n.util.objId(e)];var r={};t[n.util.objId(e)]=r;for(var l in e)e.hasOwnProperty(l)&&(r[l]=n.util.clone(e[l],t));return...