I have a div wrap whose size is a percentage of the screen width. Inside this wrap is multiple .item divs. As the window gets smaller it breaks into new lines obviously.

I wrote some code which basically takes the width of the wrap and divides it by the sum of the widths of the .item boxes. But the flaw is that it looks at it thinking how many boxes could fit in total, were one to mix and match them perfectly like building blocks, but that's not how it works because the ordering is stagnant.

How could I make this logic work?

CodePen

jQuery:

var itemWidth = 0;
var lineCount = 1;


$(window).on('resize', function(){
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  lineCount=1;
 
  $('.item').each(function(index, element) {
      if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = 0;
      }
  });
});

HTML:

  
 
    

  
    
Computer Science
    
Language
    
Marketing
    
Biology
    
Computer Science
    
Language
    
Marketing
    
Biology
    
Computer Science
    
Language
    
Marketing
    
Biology
    
Computer Science
    
Language
    
Marketing
    
Biology

  
  
 

CSS:

body {
  padding:25px;
}

.answer {
  position:fixed;
  bottom:0;
  left:0;
}

#container {
  border: 1px solid rgb(200,200,200);
  height: auto;
  width: 30%;
  margin:0 auto;
}

.item {
  padding: 10px;
  background-color: #aef2bd;
  float: left;
}

.rect {
  height: 100px;
  width:100%;
  position: relative;
}

.rect .line {
  position:absolute;
  height:50px;
  width: 100%;
  bottom:0;
  border-top: 1px solid red;
}