JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="p-checkbox">
    <input type="checkbox" id="chk1" />
    <label for="chk1">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk2" />
    <label for="chk2">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk3" />
    <label for="chk3">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk4" />
    <label for="chk4">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk5" />
    <label for="chk5">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk6" />
    <label for="chk6">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk7" />
    <label for="chk7">Johnny Frank</label>
  </div>
</div>

CSS

.container {
  width: 500px;
  height: 600px;
  background: silver;
  display: flex;
  flex-wrap: wrap;
}

.p-checkbox {
  margin-right: 10px;
}