0

In my code I have the 2 food items, then a comparison on the right. For some reason, the comparison isn't formatted to the right correctly (when you select 2 food items, it pushes the other elements down). Any idea why this is happening and how I can fix this? Help is much appreciated 

var  stocks= [
  ["Beef (80/20) raw","oz",115.4451262,2.094125,1.199617347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Beef (90/10) raw","oz",115.4451262,2.094125,1.199617347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Chicken breast","oz",32.39053977,0.320375,0.07197704082,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
  ["Chicken thighs/legs","oz",32.39053977,0.320375,0.07197704082,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
  ["Milk (whole)","fl oz",7.638924987,0.146025,0.0002099330357,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Milk (2%)","fl oz",7.638924987,0.06112164455,0.0002099330357,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
  ["Pizza (cheese)","slice",42,0.9700347449,0.006297991071,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
  ["Ice Cream","cup",32.59312,0.6168324833,0.002345956329,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
  ["Milk (skim)","fl oz",7.638924987,0.05927058824,0.0002099330357,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Eggs (large)","each",43.13341461,0.514206,0.007354326122,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
  ["Lamb","oz",78.125,2.8105,1.199617347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
  ["Cheese (hard)","slice (oz)",37.44571072,1.35025,0.002099330357,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
  ["Yogurt","oz",5.833333333,0.09375,0.0002099330357,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
  ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08232711306,0.0005248325893,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
  ["Chocolate","oz",127.316,0.1862906,0.00004198660714,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
  ["Cacao","oz",179.739,0.625,0,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
  ["Salmon (farmed)","oz",0.498125,0.56925,0,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
  ["Tuna (canned in oil)","oz",0.498125,0.1197485281,0,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
  ["Mayo","oz",14.41309121,0.121875,0.001838581531,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
  ["Pulled Pork raw","oz",44.84498316,0.63525,0.1411314526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
  ["Butter (salted)","oz",41.58720633,0.5875,0.00440859375,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
  ["Soy Burger","oz",21.8,0.048125,0,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
  ["Vegan Nuggets (soy)","oz",21.8,0.048125,0,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
  ["Soymilk (original)","fl oz",2.319532348,0.02445449777,0,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
  ["Tofu","oz",25.25,0.09625,0,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
  ["Tempeh","oz",12.383064,0.0230998152,0,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
  ["Mixed Nuts","oz",18.72285536,0.18425,0,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
  ["Bread","slice",9.735884788,0.1530147137,0,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
  ["Lentils","oz",30.3684714,0.07425,0,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
  ["Black Beans","oz",30.3684714,0.141625,0,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
  ["Tomato Sauce","oz",3.13704,0.09375,0,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
  ["Pinto Beans","oz",30.3684714,0.141625,0,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
  ["French Fries","oz",2.9337142,0.0417335921,0,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
  ["Peanut Butter","oz",36,0.2145,0,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
  ["Olive Oil","oz",21.77842536,0.2306145384,0,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
  ["Banana","1 medium",6.440662244,0.1763699536,0,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
  ["Mixed vegetables","oz",2.41150377,0.125,0,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
  ["Nutritional Yeast","g",0.08506329224,0.00706361088,0,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
  ["Rice (white)","oz",25.46308329,0.34375,0,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
  ["Potatoes","oz",1.872285536,0.03575,0,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
  ["Vegetable Oil","oz",17.70433203,0.125,0,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
  ["Wheat (flour)","cup",40.44136758,0.1235081329,0,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25  ],
  ["Margarine","oz",9.915624199,0.06125,0,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
  ["Corn Syrup","fl oz",11.15931776,0.01728062914,0,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
  ["Sugar","oz",11.23371322,0.01503093504,0,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
  ["Corn (grain)","oz",6.74022793,0.0104375,0,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
  ["Soda","fl oz",10.64647779,0.02494335117,0,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
]
function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    calories: [data[5], ''],
    protein: [data[6], 'g'],
    fat: [data[7], 'g'],
    saturatedFat: [data[9], 'g'],
    sugar: [data[8], 'g'],
    sodium: [data[10], 'mg'],
    cholesterol: [data[11], 'mg'],
    unitsPerServing: data[data.length - 1]
  }
}

stocks = stocks.map(Stock)

var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')

$selects.each(function() {
  $(this).append(stocks.map(function(stock, i) {
    return new Option(stock.name, i)
  }))
})

function format(data, multiplier, digits) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString()
  return data.join(' ')
}

function stockFacts(stock, quantity) {
  return [
    format(stock.calories, quantity, 2) + ' calories<br>' +
    format(stock.protein, quantity, 2) + ' of protein<br>' +
    format(stock.fat, quantity, 3) + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2) + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2) + ' of sugar<br>' +
    format(stock.sodium, quantity, 2) + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2) + ' of cholesterol<br>'
  ]
}

$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}

function updateAmount() {
  var quantity = +$quantity.val() 
    
  $selects.each(function() {
    var $result = $(this).nextAll('.result').empty()
    var $amount = $(this).prev().find('.servingUnit').empty()
    var stock = getStock(this)
    if (!stock) return
    var amount = quantity * stock.unitsPerServing
    
    $amount.text(' (' + amount + ' ' + stock.servingUnit + ')')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var diff = {}
  Object.keys(selected[0]).forEach(function (k) {
    if (/^(name|servingUnit|unitsPerServing)$/.test(k)) return
    var first = selected[0][k].slice()
    var second = selected[1][k].slice()
    first[0] *= selected[0].unitsPerServing
    second[0] *= selected[1].unitsPerServing
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'more' : 'less']
  })
  $comparisonResult.html(stockFacts(diff, quantity))
}
  .side {
  float:left;
  margin: 0.5%;
  border: 3px solid #73AD21;
  width: 33%;
  
}
.sideone {
  float:middle;
  margin: 0.5%;
  width: 33%;
  border: 3px solid #73AD21;
  position:relative;
  clear:both;
}
.mid {
  float:middle;
  margin: 0.5%;
  width: 33%;
}
.comparison {
  float:right;
  width:66%;
  position:relative;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <label>
    Servings:
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>

  <div>
    <div class="comparison">
      <h2>Comparison:</h2>
      <br>
      <br>
      <div class="result"></div>
    </div>
    <div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
     
    </div>
    <div class="sideone">
      <h2>Second Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
   
    </div>
    
  </div>
</body>
Dick Thompson
  • 599
  • 1
  • 12
  • 26

3 Answers3

3

I would put them in a flex parent, with the first child be a single element that wraps the items, and the second child the comparison on the right.

var  stocks= [
  ["Beef (80/20) raw","oz",115.4451262,2.094125,1.199617347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Beef (90/10) raw","oz",115.4451262,2.094125,1.199617347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Chicken breast","oz",32.39053977,0.320375,0.07197704082,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
  ["Chicken thighs/legs","oz",32.39053977,0.320375,0.07197704082,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
  ["Milk (whole)","fl oz",7.638924987,0.146025,0.0002099330357,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Milk (2%)","fl oz",7.638924987,0.06112164455,0.0002099330357,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
  ["Pizza (cheese)","slice",42,0.9700347449,0.006297991071,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
  ["Ice Cream","cup",32.59312,0.6168324833,0.002345956329,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
  ["Milk (skim)","fl oz",7.638924987,0.05927058824,0.0002099330357,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Eggs (large)","each",43.13341461,0.514206,0.007354326122,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
  ["Lamb","oz",78.125,2.8105,1.199617347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
  ["Cheese (hard)","slice (oz)",37.44571072,1.35025,0.002099330357,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
  ["Yogurt","oz",5.833333333,0.09375,0.0002099330357,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
  ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08232711306,0.0005248325893,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
  ["Chocolate","oz",127.316,0.1862906,0.00004198660714,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
  ["Cacao","oz",179.739,0.625,0,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
  ["Salmon (farmed)","oz",0.498125,0.56925,0,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
  ["Tuna (canned in oil)","oz",0.498125,0.1197485281,0,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
  ["Mayo","oz",14.41309121,0.121875,0.001838581531,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
  ["Pulled Pork raw","oz",44.84498316,0.63525,0.1411314526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
  ["Butter (salted)","oz",41.58720633,0.5875,0.00440859375,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
  ["Soy Burger","oz",21.8,0.048125,0,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
  ["Vegan Nuggets (soy)","oz",21.8,0.048125,0,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
  ["Soymilk (original)","fl oz",2.319532348,0.02445449777,0,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
  ["Tofu","oz",25.25,0.09625,0,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
  ["Tempeh","oz",12.383064,0.0230998152,0,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
  ["Mixed Nuts","oz",18.72285536,0.18425,0,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
  ["Bread","slice",9.735884788,0.1530147137,0,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
  ["Lentils","oz",30.3684714,0.07425,0,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
  ["Black Beans","oz",30.3684714,0.141625,0,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
  ["Tomato Sauce","oz",3.13704,0.09375,0,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
  ["Pinto Beans","oz",30.3684714,0.141625,0,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
  ["French Fries","oz",2.9337142,0.0417335921,0,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
  ["Peanut Butter","oz",36,0.2145,0,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
  ["Olive Oil","oz",21.77842536,0.2306145384,0,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
  ["Banana","1 medium",6.440662244,0.1763699536,0,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
  ["Mixed vegetables","oz",2.41150377,0.125,0,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
  ["Nutritional Yeast","g",0.08506329224,0.00706361088,0,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
  ["Rice (white)","oz",25.46308329,0.34375,0,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
  ["Potatoes","oz",1.872285536,0.03575,0,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
  ["Vegetable Oil","oz",17.70433203,0.125,0,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
  ["Wheat (flour)","cup",40.44136758,0.1235081329,0,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25  ],
  ["Margarine","oz",9.915624199,0.06125,0,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
  ["Corn Syrup","fl oz",11.15931776,0.01728062914,0,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
  ["Sugar","oz",11.23371322,0.01503093504,0,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
  ["Corn (grain)","oz",6.74022793,0.0104375,0,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
  ["Soda","fl oz",10.64647779,0.02494335117,0,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
]
function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    calories: [data[5], ''],
    protein: [data[6], 'g'],
    fat: [data[7], 'g'],
    saturatedFat: [data[9], 'g'],
    sugar: [data[8], 'g'],
    sodium: [data[10], 'mg'],
    cholesterol: [data[11], 'mg'],
    unitsPerServing: data[data.length - 1]
  }
}

stocks = stocks.map(Stock)

var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')

$selects.each(function() {
  $(this).append(stocks.map(function(stock, i) {
    return new Option(stock.name, i)
  }))
})

function format(data, multiplier, digits) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString()
  return data.join(' ')
}

function stockFacts(stock, quantity) {
  return [
    format(stock.calories, quantity, 2) + ' calories<br>' +
    format(stock.protein, quantity, 2) + ' of protein<br>' +
    format(stock.fat, quantity, 3) + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2) + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2) + ' of sugar<br>' +
    format(stock.sodium, quantity, 2) + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2) + ' of cholesterol<br>'
  ]
}

$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}

function updateAmount() {
  var quantity = +$quantity.val() 
    
  $selects.each(function() {
    var $result = $(this).nextAll('.result').empty()
    var $amount = $(this).prev().find('.servingUnit').empty()
    var stock = getStock(this)
    if (!stock) return
    var amount = quantity * stock.unitsPerServing
    
    $amount.text(' (' + amount + ' ' + stock.servingUnit + ')')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var diff = {}
  Object.keys(selected[0]).forEach(function (k) {
    if (/^(name|servingUnit|unitsPerServing)$/.test(k)) return
    var first = selected[0][k].slice()
    var second = selected[1][k].slice()
    first[0] *= selected[0].unitsPerServing
    second[0] *= selected[1].unitsPerServing
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'more' : 'less']
  })
  $comparisonResult.html(stockFacts(diff, quantity))
}
  .side {
  margin: 0.5%;
  border: 3px solid #73AD21;      
}
.sideone {
  margin: 0.5%;
  border: 3px solid #73AD21;
  position:relative;
}
.mid {
  margin: 0.5%;
}
.comparison {
  position:relative;
  margin-left: 1em;
}
.outer {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <label>
    Servings:
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>
<div class="outer">
  <div>
    <div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
    </div>
    <div class="sideone">
      <h2>Second Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>

    </div>
  </div>
  <div class="comparison">
    <h2>Comparison:</h2>
    <br>
    <br>
    <div class="result"></div>
  </div>
</div>
  
</body>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Flex is a good idea.. But browser support is still in progress... Something that is supports older and newer browsers is the ideal path. – Cam Apr 18 '17 at 22:09
  • Of course, and I am a firm believer in using newer techniques.. My statement is to affirm that if a traditional method will work its always the best method. But to each its own. I +1 you still. – Cam Apr 18 '17 at 22:15
  • 1
    Thanks! It looks great on the snippet but for some reason the elements are all on top of each other when I put it into CodePen. Why would this happen? – Dick Thompson Apr 18 '17 at 22:23
  • @DickThompson If you found Michael's useful, you should mark as solution. – Neil Apr 18 '17 at 22:25
  • @DickThompson can you link me to it? – Michael Coker Apr 18 '17 at 22:27
  • @DickThompson Check your HTML syntax, he put an additional DIV element to the comparison div. YOu may have missed that. – Cam Apr 18 '17 at 22:39
0

This question is really only about CSS, so we don't really need 95% of the code you offered. To get to your blind-spot, try creating a targeted example like this: https://jsfiddle.net/sheriffderek/qouo61k3/

Here is the minimal markup and an example of each of the three most used techniques. You'll need to understand all three - because even in a flexbox era, you'll still need the others often.

<section class='thing alignment-type'>
  <div class='side left'>
    <h2>Left</h2>
    <p>...</p>
  </div>

  <div class='side right'>
    <h2>Right</h2>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</section>

...

/* inline-block */
.inline-block-thing .side {
  display: inline-block;
  width: 49%; /* there is a pesky invisible space between inline-block elements */
  vertical-align: top;
}

/* float */
.float-thing {
  overflow: hidden; /* temp clearfix */
  /* http://stackoverflow.com/questions/8554043/what-is-a-clearfix */
}
.float-thing .side {
  width: 50%;
  float: left;
}

/* flex-thing */
.flex-thing {
  display: flex;
}
.flex-thing .side {
  flex-basis: 50%;
}
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

ALSO note that there is no float: middle; https://developer.mozilla.org/en-US/docs/Web/CSS/float

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
-1

Is this what you are looking for? The issue is in your CSS, you have a CLear in your float:middle and you dont need float : middle... it should be right

var  stocks= [
  ["Beef (80/20) raw","oz",115.4451262,2.094125,1.199617347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Beef (90/10) raw","oz",115.4451262,2.094125,1.199617347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Chicken breast","oz",32.39053977,0.320375,0.07197704082,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
  ["Chicken thighs/legs","oz",32.39053977,0.320375,0.07197704082,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
  ["Milk (whole)","fl oz",7.638924987,0.146025,0.0002099330357,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Milk (2%)","fl oz",7.638924987,0.06112164455,0.0002099330357,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
  ["Pizza (cheese)","slice",42,0.9700347449,0.006297991071,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
  ["Ice Cream","cup",32.59312,0.6168324833,0.002345956329,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
  ["Milk (skim)","fl oz",7.638924987,0.05927058824,0.0002099330357,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Eggs (large)","each",43.13341461,0.514206,0.007354326122,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
  ["Lamb","oz",78.125,2.8105,1.199617347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
  ["Cheese (hard)","slice (oz)",37.44571072,1.35025,0.002099330357,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
  ["Yogurt","oz",5.833333333,0.09375,0.0002099330357,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
  ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08232711306,0.0005248325893,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
  ["Chocolate","oz",127.316,0.1862906,0.00004198660714,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
  ["Cacao","oz",179.739,0.625,0,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
  ["Salmon (farmed)","oz",0.498125,0.56925,0,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
  ["Tuna (canned in oil)","oz",0.498125,0.1197485281,0,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
  ["Mayo","oz",14.41309121,0.121875,0.001838581531,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
  ["Pulled Pork raw","oz",44.84498316,0.63525,0.1411314526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
  ["Butter (salted)","oz",41.58720633,0.5875,0.00440859375,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
  ["Soy Burger","oz",21.8,0.048125,0,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
  ["Vegan Nuggets (soy)","oz",21.8,0.048125,0,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
  ["Soymilk (original)","fl oz",2.319532348,0.02445449777,0,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
  ["Tofu","oz",25.25,0.09625,0,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
  ["Tempeh","oz",12.383064,0.0230998152,0,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
  ["Mixed Nuts","oz",18.72285536,0.18425,0,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
  ["Bread","slice",9.735884788,0.1530147137,0,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
  ["Lentils","oz",30.3684714,0.07425,0,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
  ["Black Beans","oz",30.3684714,0.141625,0,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
  ["Tomato Sauce","oz",3.13704,0.09375,0,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
  ["Pinto Beans","oz",30.3684714,0.141625,0,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
  ["French Fries","oz",2.9337142,0.0417335921,0,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
  ["Peanut Butter","oz",36,0.2145,0,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
  ["Olive Oil","oz",21.77842536,0.2306145384,0,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
  ["Banana","1 medium",6.440662244,0.1763699536,0,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
  ["Mixed vegetables","oz",2.41150377,0.125,0,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
  ["Nutritional Yeast","g",0.08506329224,0.00706361088,0,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
  ["Rice (white)","oz",25.46308329,0.34375,0,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
  ["Potatoes","oz",1.872285536,0.03575,0,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
  ["Vegetable Oil","oz",17.70433203,0.125,0,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
  ["Wheat (flour)","cup",40.44136758,0.1235081329,0,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25  ],
  ["Margarine","oz",9.915624199,0.06125,0,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
  ["Corn Syrup","fl oz",11.15931776,0.01728062914,0,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
  ["Sugar","oz",11.23371322,0.01503093504,0,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
  ["Corn (grain)","oz",6.74022793,0.0104375,0,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
  ["Soda","fl oz",10.64647779,0.02494335117,0,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
]
function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    calories: [data[5], ''],
    protein: [data[6], 'g'],
    fat: [data[7], 'g'],
    saturatedFat: [data[9], 'g'],
    sugar: [data[8], 'g'],
    sodium: [data[10], 'mg'],
    cholesterol: [data[11], 'mg'],
    unitsPerServing: data[data.length - 1]
  }
}

stocks = stocks.map(Stock)

var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')

$selects.each(function() {
  $(this).append(stocks.map(function(stock, i) {
    return new Option(stock.name, i)
  }))
})

function format(data, multiplier, digits) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString()
  return data.join(' ')
}

function stockFacts(stock, quantity) {
  return [
    format(stock.calories, quantity, 2) + ' calories<br>' +
    format(stock.protein, quantity, 2) + ' of protein<br>' +
    format(stock.fat, quantity, 3) + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2) + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2) + ' of sugar<br>' +
    format(stock.sodium, quantity, 2) + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2) + ' of cholesterol<br>'
  ]
}

$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}

function updateAmount() {
  var quantity = +$quantity.val() 
    
  $selects.each(function() {
    var $result = $(this).nextAll('.result').empty()
    var $amount = $(this).prev().find('.servingUnit').empty()
    var stock = getStock(this)
    if (!stock) return
    var amount = quantity * stock.unitsPerServing
    
    $amount.text(' (' + amount + ' ' + stock.servingUnit + ')')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var diff = {}
  Object.keys(selected[0]).forEach(function (k) {
    if (/^(name|servingUnit|unitsPerServing)$/.test(k)) return
    var first = selected[0][k].slice()
    var second = selected[1][k].slice()
    first[0] *= selected[0].unitsPerServing
    second[0] *= selected[1].unitsPerServing
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'more' : 'less']
  })
  $comparisonResult.html(stockFacts(diff, quantity))
}
  .side {
  float:left;
  margin: 0.5%;
  border: 3px solid #73AD21;
  width: 33%;
  
}
.sideone {
  float:middle;
  margin: 0.5%;
  width: 33%;
  border: 3px solid #73AD21;
}
.mid {
  float:left;
  margin: 0.5%;
  width: 33%;
}
.comparison {
  float:right;
  width:65%;
  position:relative;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <label>
    Servings:
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>

  <div>
    <div class="comparison">
      <h2>Comparison:</h2>
      <br>
      <br>
      <div class="result"></div>
    </div>
    <div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
     
    </div>
    <div class="sideone">
      <h2>Second Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
   
    </div>
    
  </div>
</body>
Cam
  • 1,884
  • 11
  • 24