JSFiddle - React, Tailwind, and code Playground

by Horia-Adrian Ionescu

HTML

<div class='container'>
<div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div>
</div>

CSS

.container{
  line-height:0;
  width:100%;
}
.row{
  height:100px;  /* <--- try putting 100.66px here or some other fractional pixel value*/
  width:100.232323px;
  display:inline-block;
  background-color:red;
  border-bottom:1px solid black;
  border-right:1px solid black;
  line-height:0;
}

JavaScript

// why do i NOT see the border bottom when i put .row "height:100.66px;" ?