CodePen

HTML

            
              <div id="calculator">
	<section id="bal_attacker" class="fieldCol">
		<h2>Attacker:</h2>

		<div>
			<label for="bal_BS1">BS:</label> <br>
			<button type="button" id="bal_BS1inc" class="incbut"> + </button> 
			<input type="number" id="bal_BS1" value="1" class="inputField"> 
			<button type="button" id="bal_BS1dec" class="decbut"> - </button>
		</div>

		<div>
			<label for="bal_S">S:</label> <br>
			<button type="button" id="bal_Sinc" class="incbut"> + </button> 
			<input type="number" id="bal_S" value="1" class="inputField"/>
			<button type="button" id="bal_Sdec" class="decbut"> - </button>
		</div>
	</section>

	<section id="bal_defender" class="fieldCol" >
		<h2>Defender:</h2>

		<div>
			<label for="bal_T">T:</label> <br>
			<button type="button" id="bal_Tinc" class="incbut"> + </button> 
			<input type="number" id="bal_T" value="1" class="inputField"> 
			<button type="button" id="bal_Tdec" class="decbut"> - </button>
		</div>
	</section>

	<section title="bal_Modifiers" class="modifiers">
		<h2>Modifiers:</h2>

		<ul>
			<li><label><input type="checkbox" id="bal_harmConv" class="regular-checkbox" /> Harm. Conv.</label></li>
			<li><label><input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /> R.r. to hit</label></li>
			<li><label><input type="checkbox" id="bal_rrToW" class="regular-checkbox" /> R.r. to wound</label></li>
		</ul>
	</section>
</div>
            
          
!
via HTML Inspector

CSS

            
              #calculator, section.modifiers ul {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  #calculator, section.modifiers ul {
    display: flex;
  }
}

#calculator section {
  vertical-align: text-top;
  display: inline-block;
  width: 30%;
  min-width: 15em;
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
}

section.modifiers ul {
  padding: 0;
}

section.modifiers li {
  display: inline-block;
  list-style-type: none;
  -webkit-flex: 1 0 33%;
  -ms-flex: 1 0 33%;
  flex: 1 0 33%;
  white-space: pre;
}

/* pretty it up! */
#calculator section {
  background: #CCC;
  margin: .5em;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 10em;
}

#bal_attacker, #bal_defender {
  text-align: center;
}

#calculator h2 {
  text-align: center;
  margin-top: 0;
}

#calculator input[type="number"] {
  width: 3em;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................