Bootstrap how to fixed dynamic list data

Question

I have showed list item in my page but I have got issue to show them. When I have a different content in each item, It will not match. What should I do? I want to move last item in the left side with getting space.

here is my code:

.single-profile-top, .single-profile-bottom {
  border: 1px solid #ddd;
  padding: 15px;
  position: relative;
  margin-bottom: 40px;
}

Answer 1

Jquery can be used to make all list data with same height.

Referance answer link

function setEqualHeight(selector, triggerContinusly) {
    var elements = $(selector)
    elements.css("height", "auto")
    var max = Number.NEGATIVE_INFINITY;

    $.each(elements, function(index, item) {
        if ($(item).height() > max) {
            max = $(item).height()
        }
    })

    $(selector).css("height", max + "px")

    if (!!triggerContinusly) {
        $(document).on("input", selector, function() {
            setEqualHeight(selector, false)
        })

       $(window).resize(function() {
            setEqualHeight(selector, false)
       })
    }


}
setEqualHeight(".sameh", true)