List Item Varying Height Issue

Question

As you can see in the screenshot, I have a spacing issue in the first "column". I would like each list item in the same row to have equal heights. It will always be 2 items in each row, so I essentially want to go through every 2 items and set them to the height of the tallest of those items. I've looked through numerous solutions but nothing seems to work for me. I feel like I will need some JS but maybe not.

<div id="why-choose-us-list">
    <ul>
        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</li>
        <li> Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</li>
        <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
        <li>Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
    </ul>
</div>

#why-choose-us-list {
  margin: 0 auto;
  overflow: hidden;
  width: 90%;
}

#why-choose-us-list li {
  background: url(img/bullet.png) left 0 top 3px no-repeat;
  float: left;
  line-height: 1.3em;
  list-style: none;
  margin-bottom: 100px;
  padding-left: 75px;
  padding-top: 0;
  text-align: left;
  width: 50%;
}

Answer 1

Here is simple solution:

var maxHeight = 0;
$('#why-choose-us-list li').each(function() {
    maxHeight = $(this).outerHeight() > maxHeight ? $(this).outerHeight() : maxHeight;
});

$('#why-choose-us-list li').height(maxHeight);

Demo: https://jsfiddle.net/tusharj/qfocv5om/

Answer 2

You don't mention what browser support is required for your solution but a really nice way to achieve something like this is using flexbox in CSS (browser support is here http://caniuse.com/flexbox and you may need to use vendor prefixes which I haven't but this currently works as is in Chrome). Something like this should do what you want:

<style media="screen">
  #why-choose-us-list {
    margin: 0 auto;
    overflow: hidden;
    width: 90%;
  }

  #why-choose-us-list > ul {
    display: flex;
    flex-flow: row wrap;
  }

  #why-choose-us-list li {
    margin-left: 2%;
    margin-bottom: 4em;
    width: 48%;
    line-height: 1.3em;
    list-style-image: url(img/bullet.png);
    text-align: left;
  }
</style>

I've made a few other changes as well like using list-style-image to display the bullet, there's no need to set it as a background. To do it this way I've switched from using padding-left to margin-left and made sure both are %'s that add up to 50% (or less would work too). I would also suggest using em's for your bottom margin rather than px so that it scales better.

Working example here

Also worth noting that you had a number of list items all with a width of 50% and padding of another 75px. CSS width does not include padding so each element has 50% + 75px width so those elements can't actually fit 2 per row.

Answer 3

You can simply clear the third item using css selector.

#why-choose-us-list li:nth-child(2n + 1){
    clear: both;
}