Dynamic element width with three div elements

by scurrilus

HTML

<div class="arround">


  <div class="a1 element">
    test
  </div>
  <div class="a2">
    test dedfefede eedefdedf wdwdwwwewe
  </div>
  <div class="a3 element">
    test
  </div>
</div>

CSS

.a1 {
  float: left
}

.a3 {
  float: right;
  text-align: right;
  
}

.a2 {
  float: left
}

.element {
  background: #ccc;
}
.arround {
  width: 100%;
}

JavaScript

jQuery(jQuery(".element").width((jQuery(".arround").width() - jQuery(".a2").width() -1) / 2));

jQuery(window).on("resize", function() {
	jQuery(jQuery(".element").width((jQuery(".arround").width() - jQuery(".a2").width() -1) / 2));
});