---
{
	"title": "Equal height (pure CSS)",
	"language": "en",
	"category": "Plugins",
	"description": "A plugin for equal height grids.",
	"tag": "eqht-css",
	"parentdir": "eqht-css",
	"altLangPrefix": "eqht-css",
	"css": ["demo/eqht-css"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Purpose</h2>
	<p>Equalize the height of elements on the same baseline.</p>
</section>

<section id="simple">
	<h2>Example</h2>
	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Long container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
				<p>Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 2</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 2</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text.</p>
			</section>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="simple"&gt;
	&lt;h2&gt;Example&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Short container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Medium container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Long container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Short container 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Medium container 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> eqht-css }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<section id="grow">
	<h2>Grow Example</h2>
	<p><strong>Note:</strong> The last row will always divide your columns proportionately in order to fill the full width.</p>
	<div class="row wb-eqht-grd grow">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Long container 1</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
				<p>Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 2</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 2</h3>
				<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
				<p>Different example text. Different example text. Different example text. Different example text.</p>
			</section>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="grow"&gt;
	&lt;h2&gt;Grow Example&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd grow&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Short container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Medium container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Long container 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Short container 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Medium container 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> eqht-css }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<section>
	<h2>Nested Example</h2>

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 1</h3>
					</div>
					<div class="panel-body">
						<p>Column 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 2</h3>
					</div>
					<div class="panel-body">
						<p>Column 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body">
						<p>Column 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 4</h3>
					</div>
					<div class="panel-body">
						<p>Column 4</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
	<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Nested Example&lt;/h2&gt;

	&lt;div class="row wb-eqht-grd"&gt;
		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Column 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Column 1&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Column 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Column 2&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Column 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Column 3&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Column 4&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Column 4&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Targeting a deeper nested elements</h2>
	<p>The following example do the same as if the <code>hght-inhrt</code> class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht-grd) whereas <code>eqht-trgt</code> is only applied to the element to equalize (nothing needs to be done about the parents). This version uses Javascript.</p>
	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Column 1</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Column 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Panel footer</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Column 2</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Column 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Panel footer</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Column 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Panel footer</p>
					</footer>
				</section>
			</div>
		</div>
	</div>
<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Targeting a deeper nested elements&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Column 1&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Panel footer&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Column 2&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Panel footer&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Column 3&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Panel footer&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>
