JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="pushercolumn"></div>
<div class="pushedcolumn">
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
</div>

<!-- for showing purposes -->
<button data-width="20%">fl width to 20%</button>
<button data-width="200px">fl width to 200px</button>
<button data-width="10em">fl width to 10em</button>

CSS

.pushercolumn {
    float: left;
    width: 30%;
    -webkit-transition: width .1s; /* for a nice transition */
}

.pushedcolumn {
    overflow: hidden;
    font-size: 0;
}

.unit {
    display: inline-block;
    width: 25%;
}

/* "show me" for the example */
.pushercolumn,
.unit {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid black;
}

.pushedcolumn {
    background: red;
}

JavaScript

/* javascript purely to change width of pushercolumn*/

var $pusher = $('.pushercolumn');

$('button').on('click', function () {
    $pusher.css('width', $(this).data('width'));
});