JSFiddle - React, Tailwind, and code Playground

HTML

I need these two divs to be inline with this overall text. <code>float:left;</code> doesn't allow me to accomplish this. <div class="theDiv">TEXT</div>
<div class="theDiv">TEXT</div>. But <code>display: inline-block;</code> does.

CSS

.theDiv {
    width: 100px;
    border: 1px solid blue;
    display: inline-block;
    padding: 2px;
    margin: 2px;
}