Responsive score table

dabblet.css

/**
 * Responsive score table
 */

.clearfix:before,
.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }
 
* { box-sizing: border-box; }
body { font-family: Helvetica; }
.score { text-align: center; }
.data-table { max-width:250px; margin:20px auto; }
.row { background-color: lightgray; border-bottom: 1px solid white; }
.score, .name { width: 50%; float:left; }
.data-left, .data-right { width:45%; float:left; background-color: gray; }
.spacer { width: 10%; float:left; text-align:center; }
.data-right .score { float: left; }
.data-left  .score { float: right;}
.data-left  .name  { float: left; }
.data-right .name { float: right; text-align: right; }

@media (min-width: 480px) {
	.mobile { display: none; }
}

dabblet.html

<div class="data-table">
	<div class="row clearfix">
		<div class="data-left">
			<div class="name">Name</div><br class="mobile"/>
			<input class="score" type="text">
		</div>
		<div class="spacer">M</div>
		<div class="data-right">
			<div class="name">Name</div><br class="mobile"/>
			<input class="score" type="text">
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}