Отрегулируйте размер абсолютных позиционных элементов в зависимости от высоты тега заголовка для адаптивного сайта.

У меня возник вопрос о том, как настроить абсолютные позиционные DIVs для регулировки высоты на основе содержимого, содержащегося в теге заголовка. Дизайн требует, чтобы цветные полосы расширялись за пределами области содержимого (макс. 1170 пикселей), которая центрирована на экране.

У меня есть HTML/CSS, но я решил, что мне нужно будет использовать JQuery, потому что реализация должна быть в WordPress, поэтому возникла необходимость придумать систему, которая может найти любые теги h2 и h3 с классом ".bar "в пределах указанного содержимого div".main ", чтобы затем добавить соответствующую установку DIV-тега, чтобы получить желаемый вид."

Проблема заключается в изменении размера браузера. Когда заголовки разбиваются на две строки, кроме обновления сайта, размеры баров больше не совпадают. Я попробовал $(window).on('resize', function(){, но он продолжает добавлять новые divs, и он становится занятым.

Здесь более упрощенный пример конструкции

HTML

<div class="main">
<h2 class="bar">Even the all-powerful Pointing</h2>
<p>Has no control about the blind texts it is an almost unorthographic life One day     however a small line of blind text by the name of Lorem Ipsum     decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didnt listen.</p>
<h3 class="bar">She packed her seven versalia</h3>
<p>Put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
</div>

CSS

.gray-bar {
  background: #888f95;
  position: absolute;
  left: 0;
  right: 42.7%;
  height: 5px;
  z-index: -1;
}
.main h2.bar, .main h3.bar {
  background: #888f95;
  color: white;
  padding: .33em 0;
}
.main{
  width: 50%;
  margin: 0 auto;
  background-color: yellow;
}

JQuery

jQuery(document).ready(function($) {
$( ".main h2.bar" ).wrapAll( "<div class='section-head' />");
$( ".main h3.bar" ).wrapAll( "<div class='section-head' />");
$( ".main" ).find( ".section-head" ).prepend("<div class='gray-bar'></div>");
var heads = 0;
$( "div.section-head" ).each(function() {
    heads++;
    var foo = "foo"+heads;
    $( this ).addClass(foo);
    newHead = "."+foo;
    var z3 = $(newHead).height();
    $(newHead).children(".gray-bar").css("height", z3);
});
});

Вот сценарий примера с моим Javascript http://jsfiddle.net/unwrittendevin/PB48u/