JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.4.2/showdown.min.js"></script>
<div class="markdown">
  <textarea class="markdown-input"></textarea>
  <div class="markdown-output"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.markdown {
  height: 100%;
}

.markdown-input,
.markdown-output {
  float: left;
  width: 50%;
  height: 100%;
}

.markdown-input {
  padding: 1em;
  resize: none;
}

.markdown-output {
  padding: 0 1em;
  overflow: auto;
}

JavaScript

var sd = new showdown.Converter(),
  $markdownInput = $('.markdown-input'),
  $markdownOutput = $('.markdown-output');

doConversion();
$markdownInput.on('input', doConversion);

$.ajax({
  url: "https://cdn.safetyskills.com/print-tests/asb-1.2/answer-key.md",
  cache: false,
  contentType: "text/markdown"
}).done(function(html) {
  $markdownInput.append(html);
  doConversion();
}).fail(function() {
  alert("Request failed");
});

function doConversion() {
	$markdownOutput.html(sd.makeHtml($markdownInput.val()));
}