JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="swim_laps">
 <div id="total_laps">Laps: 
 <small>&nbsp;(meters)<input name="m_or_y" type="checkbox" id="m_or_y"  ></small>
 <input onClick="totalYards()" pattern="[0-9]*"  inputmode="decimal" type="number" id="laps" size="2" maxlength="2" name="laps">
 </div>
  <div id="yards">Yards: <input  name="yards" id="swim_distance_y"></div>
	<div id="meters">Meters: <input name="meters" id="swim_distance_m"></div>
</div>

CSS

#swim_laps {
  display: grid;
  width: 100%;
  grid-template-areas:
    "laps  yards"
    "laps  meters";
  grid-template-columns: 40% 40%;
}

#swim_laps > #total_laps {
  grid-area: laps;
  background-color: #ffa08c;
}

#swim_laps > #yards {
  grid-area: yards;
  background-color: #ffff64;
}

#swim_laps > #meters {
  grid-area: meters;
  background-color: #8cffa0;
}
#swim_laps input {float: right;}
#total_laps input {float: unset; }