JSFiddle - React, Tailwind, and code Playground

by Kyle Falconer

HTML

<div class="container" id="container">
    <div class="box" id="box1">This div occupies the left half.</div>
    <div class="box" id="box2">This div occupies the right half.</div>
    <div class="box" id="box1">This div occupies the left half.</div>
    <div class="box" id="box3">This div occupies the right half.</div>
</div>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="result7"></div>
<div id="result8"></div>
<div id="result9"></div>

CSS

.container {
    width:300px;
    border:1em solid;
    overflow: hidden;
}
.box {
    /* */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:50%;
    border:20px solid red;
    float:left;
}

JavaScript

function w(elem) {
    return elem.getBoundingClientRect().right - elem.getBoundingClientRect().left;
}


/**
 * getComputedStyle function for IE8
 * borrowed from:
 * http://missouristate.info/scripts/2013/common.js
 */
"getComputedStyle" in window || function() {
  function c(a, b, g, e) {
    var h = b[g];
    b = parseFloat(h);
    h = h.split(/\d/)[0];
    e = null !== e ? e : /%|em/.test(h) && a.parentElement ? c(a.parentElement, a.parentElement.currentStyle, "fontSize", null) : 16;
    a = "fontSize" == g ? e : /width/i.test(g) ? a.clientWidth : a.clientHeight;
    return "em" == h ? b * e : "in" == h ? 96 * b : "pt" == h ? 96 * b / 72 : "%" == h ? b / 100 * a : b;
  }
  function a(a, c) {
    var b = "border" == c ? "Width" : "", e = c + "Top" + b, h = c + "Right" + b, l = c + "Bottom" + b, b = c + "Left" + b;
    a[c] = (a[e] == a[h] == a[l] == a[b] ? [a[e]] : a[e] == a[l] && a[b] == a[h] ? [a[e], a[h]] : a[b] == a[h] ? [a[e], a[h], a[l]] : [a[e], a[h], a[l], a[b]]).join(" ");
  }
  function b(b) {
    var d, g = b.currentStyle, e = c(b, g, "fontSize", null);
    for (d in g) {
      /width|height|margin.|padding.|border.+W/.test(d) && "auto" !== this[d] ? this[d] = c(b, g, d, e) + "px" : "styleFloat" === d ? this["float"] = g[d] : this[d] = g[d];
    }
    a(this, "margin");
    a(this, "padding");
    a(this, "border");
    this.fontSize = e + "px";
    return this;
  }
  b.prototype = {};
  window.getComputedStyle = function(a) {
    return new b(a);
  };
}();

/**
 * IE8 compatible method for getting the inside width of an element
 * @param {Element} elem
 * @return {number}
 */
function computedWidth(elem) {
    var currElemStyles = window.getComputedStyle ? window.getComputedStyle(elem) : {};
    var isNotIE8 = elem.addEventListener;
    var elemWidth;

    if (isNotIE8) {
        elemWidth = parseFloat(currElemStyles.width);
    } else {
        var boundingRect = elem.getBoundingClientRect();
        elemWidth = boundingRect.right -...