## Description The equal height plugin equalises the heights of multiple elements if they are rendered on the same baseline. ## How to use To trigger the equal height plugin, add the class `wb-eqht` to the element containing the elements whose height you want to equalise. ## Configuration options The equal height plugin has no configuration options. ## User interface The equal height plugin has no user interface. ## Triggering events * Page load * Text resize * Window width resize * Window height resize * DataTable draw ## Assumptions 1. The elements for which the height is to be equalised have a fixed width that is less than 100%, for at least two sequential elements, but not all necessarily have the same width. A width of 100% for all elements would mean that all elements are on their own baseline and therefore there is no need to equalise them. If the two elements that have a width of less than 100% are not sequential, then they cannot be on the same baseline and therefore there is no need to equalise them. 2. The elements for which the height is to be equalised have a CSS `display` value of `inline-block` or `inline-table`. No other `display` value can produce a list of fixed-width elements that wraps. 3. At least two of the elements for which the height is to be equalised have different heights. But we cannot assume that those two elements will be on the same baseline. ## Functionality ### Determining if two elements are on the same baseline `t' <= (t + h) && (t' + h') >= t` The top of the target element is not beyond the combined top and height of the base element and the combined top and height of the target element are not beyond the top of the base element. **Cost:** 4 reflows + repaints per comparison to get the `offsetTop` and `offsetHeight` of each element. **Number of comparisons:** `r(n - 1)` where `r` is the number of rows and `n` is the number of elements per row. ## Questions 1. What is the default vertical alignment for `display: inline-block` and for `display: inline-table` for each browser?