JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Cake Flavor-->
	<div class="grid-container">
	<div class ="grid-item">
	<h3>Cake Flavor</h3>
		<input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">White</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Chocolate</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Yellow</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Marble</label><br>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Confetti (NEW)</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Red Velvet (NEW)</label>
    </div>
    <!--Filling option-->
    <div class="grid-item">
    	<h3>Filling Option</h3>
		<input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Lemon</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Raspberry</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Strawberry</label>
	    <input type="checkbox" name="style1" value="style1">
	    <label class="font1" for="style1">Bavarian Cream</label><br>
   	
    </div>

	</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  border: 5px outset brown;
  padding: 10px;
  justify-content: space-between;
  width: 1000px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 17px;

}