Inconsistent horizontal and vertical DIV spacing

I'm puzzled as to why on some browsers I get regular grid spacing between squares and others I get different spacing vertically than I do horizontally. I'm using Chrome Version 96.0.4664.93 (Official Build) (x86_64).

I was told a little hack which is border-right: 4px solid white; to the CSS style for div>div. However, I'd like to know why the inconsistency in rendering.

grid_on_Chrome _96, grid_on_Electron

div>div {
  display: inline-block;
  background-color: rgb(68, 157, 230);
  border: 2px solid white;
}

<div>
  <div style="width: 50px; height: 
   50px;">
  </div>
  <div style="width: 50px; height: 
   50px;">
  </div>
</div>
<div>
  <div style="width: 50px; height: 50px;">
  </div>
  <div style="width: 50px; height: 50px;">
  </div>
</div>