JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<button>Do it!</button>
<h2>Set to Max Width</h2>
<div id="toMax">
    <div class="box" style="width:400px"></div>
    <div class="box" style="width:250px"></div>
    <div class="box" style="width:200px"></div>
    <div class="box" style="width:100px"></div>
    <div class="box" style="width:300px"></div>
</div>
<h2>Set to Min Width</h2>
<div id="toMin">
    <div class="box" style="width:400px"></div>
    <div class="box" style="width:250px"></div>
    <div class="box" style="width:200px"></div>
    <div class="box" style="width:100px"></div>
    <div class="box" style="width:300px"></div>
</div>

CSS

.box { border: #333 1px solid; height: 20px; margin: 2px 0; }

JavaScript

$.fn.limitWidth = function(max){
  limit = (max) ? 'max' : 'min';
  return this.width( Math[limit].apply(this, $(this).map(function(i,e){
   return $(e).width() 
  }).get() ) )
};

$('button').click(function(){
  $('#toMax .box').limitWidth(true); // true flag means set to max
  $('#toMin .box').limitWidth();     // no flag/false flag means set to min
});