HTML, CSS and JavaScript playground

<div id='unit-container'>
	<div id='configurator-container' class='centered'>
       <form id="configurator">
			<div class='s_container'>
				<dt class='list-item'>
					Please select your fiber type.
				</dt>
				<dd class='list-item'>
					<select id="fiber-type" required="required">
						<option selected="selected" value="none">--Please Select--</option>
						<option value="option1">OM1 62.5um </option>
						<option value="option2">OM2 50um</option>
						<option value="option3">OM3 50um</option>
						<option value="option4">OM4 50um</option>
						<option value="option5">SM (Low Water Peak)</option>
						<option value="option6">SM (Bend Insensitive)</option>
						<option value="option7">SM (Standard)</option>
					</select>
				</dd>
			</div>
			<div class='s_container'>
				<dt class='list-item'>
					Please select your fiber count. (001-432)
				</dt>
				<dd class='list-item'>
					<input id='fiber-count' type='number' max='432' min='001' value="" required>
				</dd>
			</div>
			<div class='s_container'>
				<dt class='list-item'>
					Please select desired cable core design
				</dt>
				<dd class='list-item'>
					<select id='cable_core_design' required>
						<option selected='selected' value='none'>--Please Select--</option>
						<option value='option1'>Interconnect </option>
						<option value='option2'>Indoor Distribution</option>
						<option value='option3'>Central Tube</option>
						<option value='option4'>Standard Loose Tube</option>
					</select>
				</dd>
				
				</div>
				<div class='s_container'>
					<dt class='list-item'>
						Please select desired cable core
					</dt>
					<dd class='list-item'>
							<input type='radio' id='radio_option_1' name='cable_core_design'>Interconnect 	
					</dd>
					<dt class='list-item'><p> </p></dt>
					<dd class='list-item'>
						<i>
							Typical Application: Jumpers
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Diam.: 1.6mm,2mm,3mm
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Jacketed 12 Fiber Ribbon
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Fiber Count: 1F-12F
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd  class='list-item'>
						<input type='radio' id='radio_option_2' name='cable_core_design'> Indoor Distribution
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Typical Application: Trunks, Harnesses
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Diam.: >3mm
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Fiber Count: 12F-144F
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<input type='radio' id='radio_option_3' name='cable_core_design'>Central Tube
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Typical Application: High Fiber Count Ribbon, 
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i class='second_line_italics'>
							Drop Cable, Indoor/Outdoor
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Diam.: >3mm
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Fiber Count: 12F-432F
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<input type='radio' id='radio_option_4' name='cable_core_design'> Standard Loose Tube
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Typical Application: OSP Cable
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Diam.: >3mm
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Fiber Count: 1F-432F
						</i>
					</dd>
				</div>
				<div class='s_container'>
					<dt class='list-item'>
						Please select desired sheath
					</dt>
					<dd class='list-item'>
						<select required='required' id='sheath'>
							<option selected='selected' value='none'>--Please Select--</option>
							<option value='option1'>Riser</option>
							<option value='option2'>Plenum</option>
							<option value='option3'>Indoor/Outdoor Riser</option>
							<option value='option4'>Indoor/Outdoor Plenum</option>
							<option value='option5'>Interlocked Armor Riser</option>
							<option value='option6'>Interlocked Armor Plenum</option>
							<option value='option7'>Interlocked Indoor/Outdoor Riser</option>
							<option value='option8'>Interlocked Indoor/Outdoor Plenum</option>
							<option value='option9'> No Jacket</option>
						</select>
					</dd>
				</div>
				<div class='s_container'>
					<dt class='list-item'>
						Please select desired subunit
					</dt>
					<dd class='list-item'>
						<input type='radio' name='subunit' id='sub_one'>250um
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Typ.> 2F CNT
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<input type='radio' name='subunit' id='sub_two'>900um
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							Typ. 1F, 2F CNT
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<input type='radio' name='subunit' id='sub_three'>Zipcord
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<i>
							2F CNT-900um
						</i>
					</dd>
					<dt class='list-item'><p></p></dt>
					<dd class='list-item'>
						<input type='radio' name='subunit' id='sub_four'>Ribbon
					</dd>
				</div>
				<div class='s_container'>
					<dt class='list-item'>
						Please select desired cable diameter
					</dt>
					<dd class='list-item'>
						<select required='required' id='diameter'>
							<option selected value='none'>--Please Select--</option>
							<option value='option1'>1.6mm</option>
							<option value='option2'>2.0mm</option>
							<option value='option3'>3.0mm</option>
							<option value='option4'>Other</option>
						</select>
					</dd>
				</div>
			
			
			<br />
        </form>
	</div>
	
	<div id='debug-box' class='centered'>
	
	</div>
	
	<div id='submit-box' class='centered'>
	</div>
	<style>
		/*the font size can be either 18px or 12px. Viewing of the page layout with dev tools suggested that it was 18px, however, the actual text size appears to be 12 */
		body{
		font: 12px tahoma;
		}
		.centered{
		border: 2px solid black;
		margin: 0 auto;
		
		width: 90%;
		margin-bottom: 10px;
		}
		
        #debug-box{
          height:  40px;
        }

#configurator-container{
		  
		}
		#submit-box{
		width: 200px;
        height: 100px;
		}
		
      #unit-container{
        border: 2px solid red;
		width: 50%;
        
      }
	  
	.select-label{
	}
	
	dt{
	float: left;
	width: 45%;
	text-align: right;
	}
	
	.list-item{
	
	}
	
	br{
	margin-bottom: 30px;
	}
	
	.s_container{
	margin-top: 20px;
	}
	.sm_it{
	font-style: italic;
	}
	i{
	padding-left: 20px;
	font-size: 10px;
	}
	.second_line_italics{
	padding-left: 40px;
	}
	#configurator-container { background-image: url("data:image/gif;base64,R0lGODlhBgAGAKIAANbXy+Hi29rc08THu9HWy8zQwwAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkYzM0I5RTQ3Q0UwRUUwMTFCMzMzRkRGNDFGODlGRDVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY2QjNGNjE4ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY2QjNGNjE3ODQ5ODExRTA4MUU4OTkzQzdFOTQ5MDU5IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzQgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyMDlGMEYwQjg2QUUwMTFCOTg2OTk5N0I0QjM1NDEyIiBzdFJlZjpkb2N1bWVudElEPSIxNzA3NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAGAAYAAAMQSBpcLnBIQFlQBApXKJBDAgA7"); }
	select{
	width: 235px;
	}
	input[type='number']{
	width: 235px;
	}
	</style>
</div>