JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Fraction Worksheet</title>
</head>

<body>

<div id="wrapper">

<div class="words">
words
</div>

<hr>

<div id="main">
<span id="startPicture">placeholder for picture</span><br>
<hr>
<span id="startButton">placeholder for start button</span>
</div>

</body>

CSS

body {
	
}

#wrapper {
	margin: auto;
	width: 80%;
	background-color:black;
	color:white;
}

/* fraction display */
.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}
/* end fraction display */

JavaScript

$(document).ready(function() {

	$('#main').on('click', '#startButton', function () {
		$('#startButton').hide();
		$('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');
	});
	
	$('.fraction').each(function(key, value) {
    	$this = $(this);
		var split = $this.html().split("/");
		if(split.length == 2){
        	$this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
		}    
	});
	
});