JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssnormalize/cssnormalize-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssfonts/cssfonts-min.css">
<div class="rFont">
    <div class="yui3-g">
        <div class="yui3-u-1-2">
            <div class="content">
                <div class="green">left</div>
            </div>
        </div>
        <div class="yui3-u-1-2">
            <div class="content">
                <div class="red">right</div>
            </div>
        </div>
    </div>
</div>
<hr/>
<div class="rFont fix">
    <div class="yui3-g">
        <div class="yui3-u-1-2">
            <div class="content">
                <div class="green">left</div>
            </div>
        </div>
        <div class="yui3-u-1-2">
            <div class="content">
                <div class="red">right</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-size: 1em;
}
.rFont {
    font-size:0.8em;
}
.content {
    padding:0.2em;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}

.fix .yui3-g{
    letter-spacing: -0.315em;
}