JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div id="prefix-container">
  <textarea id="prefix" placeholder="prefix"></textarea>
</div>
<div id="input-container">
  <textarea id="input" placeholder="questions"></textarea>
</div>
<div id="output-container">
  <ol id="output"></ol>
</div>

CSS

body {
  font-family: helvetica;
}

#prefix-container {
  display: block;
  width: 50%;
  position: absolute;
  right: 50%;
  top: 0px;
  left: 0;
  bottom: 60px;
}

#prefix {
  font-size: 18px;
  padding: 20px;
  width: 100%;
  height: 92%;
  border: none;
  line-height: 20px;
  outline: none;
  background: #ececec;
}

#input-container {
  display: block;
  width: 50%;
  position: absolute;
  right: 50%;
  top: 60px;
  left: 0;
  bottom: 0;
}

#input {
  font-size: 18px;
  padding: 20px;
  width: 100%;
  height: 92%;
  border: none;
  line-height: 20px;
  outline: none;
}

#output-container {
  position: absolute;
  right: 0;
  top: 0;
  left: 50%;
  bottom: 0;
  list-style: number;
  background: #666;
  color: #fff;
  overflow: scroll;
}

#output {
  padding-right: 20px;
}

#output li {
  margin-bottom: 2px;
}

JavaScript

var $prefix = $('#prefix'),
	$input = $('#input'),
	$output = $('#output');
		
$prefix.bind('blur focus change keyup keydown', update);
$input.bind('blur focus change keyup keydown', update);

function update () {
	var results = [];

	$input.val().trim().split('\n').forEach(function (line) {
		if (!line) return;
		
    results.push($prefix.val().trim() + ' ' + line);
	});

	$output.html(results.map(function (item) {
		return '<li>' + item + '</li>';
	}).join(''));
}