JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<h3>Consequences of not setting a width to center divs</h3>
<h4>Works ok as long as both center divs have the same content</h4>
<div class="container">
    <div class="child left">left</div>
    <div class="child center">center</div>
    <div class="child center">center</div>
    <div class="child right">right</div>
</div>
<div class="container">
    <div class="child left">left</div>
    <div class="child center">center left gets wider because of extra content</div>
    <div class="child center">center right</div>
    <div class="child right">right</div>
</div>
<h4>Setting a wider width on the container div reproduces same behavior</h4>
<div class="container with-width">
    <div class="child left">left</div>
    <div class="child center">center</div>
    <div class="child center">center</div>
    <div class="child right">right</div>
</div>
<div class="container with-width">
    <div class="child left">left</div>
    <div class="child center">center left gets wider because of extra content</div>
    <div class="child center">center right</div>
    <div class="child right">right</div>
</div>
<h3>Using javascript to dynamically distribute the remaining width</h3>
<div class="js-container with-width">
    <div class="js-child left">left</div>
    <div class="js-child center">center</div>
    <div class="js-child center">center</div>
    <div class="js-child right">right</div>
</div>
<div class="js-container with-width">
    <div class="js-child left">left</div>
    <div class="js-child center">center left <em>doesn't get wider</em> because of extra content</div>
    <div class="js-child center">center right</div>
    <div class="js-child right">right</div>
</div>

CSS

div { margin: 5px; padding: 5px; } 
.container,
.js-container { border: 1px solid red; display: table; }
.with-width { width: 80%; }
.child,
.js-child { border: 1px solid gray; display: table-cell; }
.left,
.right { width: 100px; }

JavaScript

$( document ).ready(function() {
    function containerWidth() {
        var w = parseInt($('.js-container').outerWidth(), 10);
        return w;
    }
    // console.log('containerWidth: ' + containerWidth());
    function outerChildrenWidth() {
        var wl = parseInt($('.js-container').find('.left').outerWidth(), 10);
        var wr = parseInt($('.js-container').find('.right').outerWidth(), 10);
        return wl + wr;
    }
    // console.log('outerChildrenWidth: ' + outerChildrenWidth());
    function centerChildWidth() {
        var w = (containerWidth() - outerChildrenWidth()) / 2;
        return w;
    }
    // console.log('centerChildWidth: ' + centerChildWidth());
    function setCenterChildWidth() {
        $('.js-container').find('.center').css('width', centerChildWidth() + 'px');
    }
    setCenterChildWidth();
});