JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="inner">
    1
  </div>
  <div class='inner'>
    2
  </div>
  <div class="inner">
    3
  </div>
  <div class="inner">
    4
  </div>
</div>

CSS

.test {
    width: 100%;
    height: auto;
    border: 1px solid red;
    display: block;
}

.inner {
    width: calc(49%);
  display: inline-block;
  height: 100px;
  margin: 0px -6px 0px 0px;
}

.inner:nth-child(even) {
    border: 1px solid blue;
}

.inner:nth-child(odd) {
    border: 1px solid green;
}