JSFiddle - React, Tailwind, and code Playground

HTML

<button>
<span class="red"></span>
<span class="blue"></span>
</button>

<button class="grid">
<span class="red"></span>
<span class="blue"></span>
</button>

<button class="grid columns">
<span class="red"></span>
<span class="blue"></span>
</button>

CSS

.red { background-color: red; }

.blue { background-color: blue; }

span {
  margin:  0.5rem;        /* */
  padding: 0 1rem;        /* */
  height:  1rem;          /* */
}

button { 
  margin: 0.5rem;         /* */
}

.grid {
  display: inline-grid;   /* */
/*  display: grid;          /* */
}

.columns {
  grid-template-columns: auto auto; /* */
}