JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn"><div class="txt"></div></div>
<br>
<div class="btn">This is some text</div> <!-- This is just text, inside an inline-block. Same line-height as above -->
<br>
<div class="btn"><div class="txt float-left"></div></div>
<br>
<div class="btn font-size-0"><div class="txt"></div></div>
<br>
<div class="btn line-height-0"><div class="txt"></div></div>

CSS

.btn {
    padding: 0px;
    border: 1px solid red;
    display: inline-block;
    margin-bottom: 6px;
}

.txt {
    display: inline-block;
    -font-size: 12px;
    -line-height: 10px;
    height: 12px;
    width: 12px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
}
.float-left {
    float: left;
}
.font-size-0 {
    font-size: 0;
}
.line-height-0 {
    line-height: 0;
}