JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mid">
    test inline-block
</div>
<div class="mid">
    test inline-block
</div>
<div class="floated">
    test block floated
</div>
<div class="floated">
    test block floated
</div>

CSS

.mid {
    display: inline-block;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
    background: red;
}
.mid + .mid {
    margin-left: 4%;
}
.floated {
    float: left;
    display: block;
    background: green;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
}
.floated + .floated {
    margin-left: 5%;
}