JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//www.jquery-steps.com/Content/examples.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//www.jquery-steps.com/Scripts/jquery.steps.min.js"></script>
<form id="wizard">
    	<!-- STEP 1 -->
    <h1>Step one</h1>
    	<fieldset>
        	<legend>Step 1</legend>
    			<label for="var1">Var 1 </label><input type="text" name="var1" id="var1" />
    			<label for="var2">Var 2: </label><input type="text" name="var2" id="var2" />
    			<label for="var3">Var 3: </label><input type="text" name="var3" id="var3" />
    			<label for="var4">Var 4: </label><input type="text" name="var4" id="var4" />

    			<label for="select1">Select 1</label>
    				<select name="select1" id="select1">
    					<option value="0" selected="selected">Stage 0</option>
    					<option value="1">Stage 1</option>
    					<option value="2">Stage 2</option>
    					<option value="3">Stage 3</option>
    				</select>
    	</fieldset>
    
    <!-- STEP 2 -->
    <h1>Step Two</h1>
    	<fieldset>
        	<legend>Step 2</legend>
    			<label for="var5">Var 5: </label><input type="text" name="var5" id="var5" />
    			<label for="var6">Var 6: </label><input type="text" name="var6" id="var6" />
    			<label for="select2">Select 2</label>
    				<select name="select2" id="select2">
    					<option value="0">Euvolaemic</option>
    					<option value="1">Dehydrated</option>
    					<option value="2">Overloaded</option>
    				</select>
    			<label for="opt1">Option 1: </label><input name="opt1" type="checkbox" id="opt1" onclick="ShowHideDiv1(this)" />
    			<div id="opt1more" style="display: none">
    				MORE FIELDS/Enable step 3 <br />
    			</div>
    			<label for="opt2">Option 2 </label><input name="opt2" type="checkbox" id="opt2" onclick="ShowHideDiv2(this)" />
    			<div id="opt2more" style="display: none">
    				<input type="range" min="0" max="100" step="25" value="0"...

CSS

.wizard > .content{
    width: 98%;
}

.wizard > .content legend{
    position: absolute;
    left: -9999em;
}

JavaScript

function ShowHideDiv1(opt1) {
        var opt1more = document.getElementById("opt1more");
        opt1more.style.display = opt1.checked ? "block" : "none";
}

function ShowHideDiv2(opt2) {
        var opt2more = document.getElementById("opt2more");
        opt2more.style.display = opt2.checked ? "block" : "none";
}
	
function showVal(newVal){
  document.getElementById("valBox").innerHTML=newVal;
}