title: Change width of elements based on other floating elements in the same row
body: <p>I'm currently working on a Material design based website theme. the basic layout would be a wrapper div that contains all cards.<br>
  With (on desktop mode) the cards automatically taking the maximum width they need (aka, width:auto;).<br>
  All cards have a float:left;<br><br></p>
  
  <p>I am trying to make a small piece of Javascript that only executes on a x screen width that will maximize the size of the cards so they will not leave gaps to the right of the rows.<br><br></p>
  
  <p>The current code that would actually matter with what element they are for:<br>
  The CSS for the cards (All div elements with class 'card'):<br></p>
  
  <pre><code>.card {
    display: inline-block;
    position: relative;
    min-width: 300px;
    max-width:calc(50% - 50px); /* Stops cards from taking more then 50% of the screen */
    min-height:300px;
    border-radius: 2px;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,     0.19);
    float:left;
    margin:5px;
    padding:10px 20px;
    z-index: 1;
  }
  </code></pre>
  
  <p>As everything should be dynamic and work across all types of monitors and orientations, there is no way to isolate the divs in a parent div to assist the resizing. What I have been thinking of (but have no idea of how to write it) would be using the Y coordinates (or JQuery's .offset().top) and find divs on the same X-position then give them a width based on the number of divs with one x-coordinate.<br><br></p>
  
  <p>The (beta) website is online <a href="http://zerothe3rd.16mb.com/" rel="nofollow">here</a><br><br></p>
  
  <p>I hope someone who know JQuery and JS better then me could help me with this. Thanks in advance!<br>A JS N00B</p>