JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div>
  <h2>I'm an h2</h2><h3 class="filler"> </h3>
</div>
<div>
  <span>I'm a span!</span>
  <h2>I'm an h2</h2><h3 class="filler"></h3>
  <span>I'm a span!</span>
</div>
<div>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
  <h2>I'm an h2</h2><h3 class="filler"></h3>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
</div>
<div>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
  <span>I'm a span!</span>
  <h2>I'm an h2</h2><h3 class="filler"></h3>
  <span>I'm a span!</span>
</div>
<div class="cont">
  <button id="button0">clear</button>
  <button id="button1">margins</button>
  <button id="button2">flex-grow</button>
</div>
<div class="cont">
  <button id="button3" class="parent">justify-content: center
    <br />(on parent)</button>
  <button id="button4" class="parent">justify-content: space-around
    <br />(on parent)</button>
</div>

CSS

div:not(.cont),
div:not(.cont) * {
  border: 1px dotted red;
}
div {
  align-items: center;
  display: flex;
}
button {
  margin: 16px;
}
.toggle1 {
  margin: auto;
}
.toggle2 {
  flex: 1;
}
.toggle3 {
  justify-content: center;
}
.toggle4 {
  justify-content: space-between;
}

div {
  position: relative;
}

h2 {
  position:absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 40px;
}
h3.filler {
  height: 40px;
  visibility: hidden;
  flex: 1 1;
}

JavaScript

$(document).on('click', 'button:not(.parent)', function(e) {
	var $h2 = $('h2, h3'),
  		index = $(this).attr('id').replace(/button/, '');
  $h2.parent().attr("class", "");
  $h2.attr("class", "toggle" + index);
});

$(document).on('click', 'button.parent', function() {
	var $h2 = $('h2, h3'),
  		index = $(this).attr('id').replace(/button/, '');
  $h2.parent().attr('class', 'toggle' + index)
  $h2.attr('class', '');
});