JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<div id="container__item">
  <div class="item__div">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos error nemo neque quam rem vero voluptate? Assumenda, beatae iusto nam possimus suscipit temporibus voluptatem voluptatum. Adipisci animi autem veritatis?</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci amet asperiores assumenda consequuntur distinctio d</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur consequatur dicta dignissimos dolorem dolorum excepturi, fuga maiores natus necessitatibus nemo nesciunt qui quia, voluptate voluptatibus? Cupiditate doloribus modi mollitia!</p>
    </div>
  </div>
  <div class="item__div">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos error nemo neque quam rem vero voluptate? Assumenda, beatae iusto nam possimus suscipit temporibus voluptatem voluptatum. Adipisci animi autem veritatis?</p>
    </div>
  </div>
  <div class="item__div">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos error nemo neque quam rem vero voluptate? Assumenda, beatae iusto nam possimus suscipit temporibus voluptatem voluptatum. Adipisci animi autem veritatis?Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Atque nemo non quod veritatis. Alias commodi debitis ea eos expedita facilis harum ipsam, necessitatibus non quo repellendus repudiandae rerum temporibus. In?</p>
    </div>
  </div>
  <div class="item__div">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eos error nemo neque quam rem vero voluptate? Assumenda, beatae iusto nam possimus suscipit temporibus voluptatem voluptatum. Adipisci animi autem veritatis?Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Delectus ex ipsam minima nisi repellat repudiandae sapiente sequi. Deleniti dicta fugit minus nisi...

CSS

.item__div {
  margin-bottom: 30px;
}

.item__div > div {
  border: 1px solid;
  margin: 0 15px;
  padding: 15px;
}

JavaScript

;
(function() {
  var version = 1.0;
  /*
   * main function flexibleWidth()
   * @param {string} c         Class elements
   * @param {number} cols      Number generated columns
   * @return {number}          Number processed items elementsLength
   * */
  function flexibleWidth(c, cols) {
    var elements = document.getElementsByClassName(c),
      elementsLength = elements.length,
      container = elements[0].parentNode,
      clears = document.getElementsByClassName('flexiblewidth__clear' + c);
    for (var i = 0, j = 0; i < container.childNodes.length; i++) {
      if (container.childNodes[i].className !== c)
        continue;
      j++;
    }
    if (elementsLength !== j) {
      console.log('Error flexibleWidth.js __line 20: Number of child elements .' + c + ' in container ' + container + ' It does not coincide with the total number of data items per page');
      return;
    } else if (cols > j) {
      console.log('Error flexibleWidth.js __line 27: The number of columns ' + cols +
        ' generated by the large number of items .' + c + ' per page');
      return;
    } else {
      container.style.overflow = 'hidden';
      if (clears.length) {
        while (clears.length > 0) {
          for (var i = 0; i < clears.length; i++) container.removeChild(clears[i]);
        }
        for (var i = 0; i < j; i++) reset(elements, i);
      }
      for (var i = 0; i < j; i++) {
        if (cols) {
          if (i && i < (j - 1) && cols != 1) {
            var clear = document.createElement("div"),
              beforeE = elements[i * cols],
              clearfix = container.insertBefore(clear, beforeE || null);
            cl(clearfix, c);
          }
        }
        calc(elements, i, cols);
      }
      if (cols && cols != 1 && cols >= 4) {
        if (!clears.length) {
          for (var i = 1; i < cols - 1; i++) rm(container);
        } else {
          for (var i = 2; i < cols - 1; i++) rm(container);
        }
        if (j / cols < 2) {
          if...