JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="ok equalize"></div><div class="height equalize">
<form method="post" action="/cart/index/add" class="form add-cart"  enctype="application/x-www-form-urlencoded" id="add-cart">
    <dl> 
     <dd class="form-hidden"> 
        <input type="hidden" id="add-id" class="form-hidden" value="1427"  name="add[id]">
     </dd> 
     <dd class="form-hidden"> 
        <input type="hidden" id="add-type" class="form-hidden" value="reference"  name="add[type]">
      </dd> 
    <span class="incrementor"> 
        <input type="text" class="form-number" value="1" id="add-quantity"  name="add[quantity]"><span class="increment">+</span><span  class="decrement">-</span></span> 
    <dt id="formsubmit-label">&nbsp;</dt> 
    <dd> 
        <input type="image" class="form-image" alt="Test"  src="/images/fr_FR/btn_addBasketBig_n_i18n.png" id="formsubmit"  name="formsubmit">
    </dd>
    </dl>
</form> 
</div>

CSS

.ok {height:150px; width:150px; background:blue; float:left;}
.height {position:relative; border:1px solid red; padding:5px; float:left;}

#formsubmit {position:absolute; bottom:5px; left:0; background:gray;}
.incrementor {bottom: 77px;
    position: absolute;
    right: 0;
}

JavaScript

/*
---
description:     Equalizer
authors:
  - David Walsh (http://davidwalsh.name)
license:
  - MIT-style license
requires:
  core/1.2.1:   '*'
provides:
  - Equalizer
...
*/
var Equalizer = new Class({
    initialize: function(elements) {
    this.elements = $$(elements);
    },
    equalize: function(hw) {
    if(!hw) { hw = 'height'; }
    var max = 0,
            prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
            offset = 'offset' + hw.capitalize();
    this.elements.each(function(element,i) {
            var calc = element[offset];
            if(calc > max) { max = calc; }
        },this);
        this.elements.each(function(element,i) {
            element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt()));
        });
        return max;
    }
    });
    
    var columnizer = new Equalizer('.equalize').equalize('height'); //call .equalize() as often as you want!