JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<ul class="field-list">

  <li class='field'>
    <input id="one" type="checkbox">
    <label for="one">Thing one</label>
  </li>
  
  <li class='field'>
    <input id="two" type="checkbox">
    <label for="two">Thing one</label>
  </li>

</ul>

CSS

* { /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  box-sizing: border-box;
}

.field-list {
  list-style: none;
  margin: 0;
  padding: auto;
}

.field-list input, .field-list label {
  display: block; /* inline by default */
}

.field-list .field {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.field-list label {
  padding: 5px 10px;
}