JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>both divs a and b have the same size except if you run it with a zoom not round on webkit (e.g. 67% and 33% on chrome)</div>
    <div id ="a">text a</div>
    <div id ="b">text b</div>
    <div id="result"></div>
</body>

CSS

#a{
    background-color: red;
    border-right: 1px solid black;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#b{
    background-color: blue;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

newWidth= 150;
$("#a").outerWidth(newWidth);
$("#b").outerWidth(newWidth);
$("#result").html("outerWidth of a : " + $("#a").outerWidth(true) + "px and outerWidth of b : " + $("#b").outerWidth(true) + "px");