JSFiddle - React, Tailwind, and code Playground

HTML

100.5px + 100.5px in 200px:
<div id="frame1">
    <div id="h1" class="half1">
        1st half
    </div>
    <div id="h2" class="half2">
        2nd half
    </div>
</div>

<div style="clear: both;"></div>

100.5px + 100.5px in 201px:
<div id="frame2">
    <div class="half1">
        1st half
    </div>
    <div class="half2">
        2nd half
    </div>
</div>

CSS

#frame1 {
    width: 200px;
}

#frame2 {
    width: 201px;
}

.half1, .half2 {
    float: left;
    width: 100.5px;
}

.half1 {
    background-color: #cfc;
    /*width: 100.4px;*/
}

.half2 {
    background-color: #ccf;
    /*width: 100.6px;*/
}

JavaScript

alert('sub pixel sizes = ' + (document.getElementById("h1").offsetTop !== document.getElementById("h2").offsetTop));