JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<ul class="groupList inblockit">
	<li>
		<h3 class="marginFix">Header 1</h3>
		<p>
		Special offer
		</p>
	</li>
	<li>
		<h3 class="marginFix">Header 2</h3>
		<p>
		Special offer
		</p>
	</li>
	<li>
		<h3 class="marginFix">Header 3</h3>
		<p>
		Special offer
		</p>
	</li>
	<li>
		<h3 class="marginFix">Header 4</h3>
		<p>
		Special offer
		</p>
	</li>
	<li>
		<h3 class="marginFix">Header 5</h3>
		<p>
		Special offer
		</p>
	</li>
</ul>

CSS

h3 {
    font-size:24px;
}

JavaScript

// Get the margin-bottom to be one third of the margin-top

$(document).ready(function() {
    var marginFix = $('.marginFix').css('font-size');
    var onethirdMargin = parseInt(marginFix) / 3;
    $('.marginFix').css({"margin-top":marginFix});
    $('.marginFix').css({"margin-bottom":onethirdMargin});
});