How do I keep two div the same height for any device?

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body { padding: 0; margin: 30px 0 30px 0; background: yellow; }
.textbox-text {  background: #fff; color: #000; padding: 15px; margin-bottom: 30px; }
.textbox {  border: 1px solid #000; margin-bottom: 30px; }

#test .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;  display: flex;}
#test .row > [class*='col-'] {display: flex;flex-direction: column; background: #fff;margin: 0 15px;}
#test .column{ padding: 15px;}
</style>

</head>
<body>
     
     <div id="projects">
        <div class="container">
            <div class="row">
                
                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site. Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site.<br><br>
                                    t will be loaded from cache when they visit your site.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container" id="test">
        <div class="row">
            <div class="col-sm-4 ">
                <div class="textbox-image ">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>

        </div>
    </div>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.textbox .textbox-text');
});


$(window).resize(function(){
  equalheight('.textbox .textbox-text');
});
</script>

</body>
</html>

Check in JsFiddle:

http://jsfiddle.net/nV3Ua/1821/


How to Increment value clicking plus minus icon in Jquery?

Html Code:

<div class="csdisplayorder" >
    <span class='csminus glyphicon glyphicon-minus'></span>
    <input class="cscurrent" type="text" disabled value="1" data-rid="1" data-pid="2">
    <span class='csplus glyphicon glyphicon-plus'></span>
</div>

Script:

<script type="text/javascript">
$(document).ready(function(){
    $('.csdisplayorder .csplus').live('click', function(){
        var dis = $(this);
        var input_obj = dis.parent().find('.cscurrent');
        var input_val = parseInt(input_obj.val());
        if(input_val == undefined){
            input_obj.val(0);
        }else{
            var new_val =  parseInt(input_val)+1;
            input_obj.val(new_val);
            $(this).fncsUpdateRoomDisplayOrder(dis, new_val);
        }
    });

    $('.csdisplayorder .csminus').live('click', function(){
        var dis = $(this);
        var input_obj = dis.parent().find('.cscurrent');
        var input_val = parseInt(input_obj.val());
        if(input_val == undefined){
            input_obj.val(0);
        }else{
            if(parseInt(input_val) >0){
                var new_val =  parseInt(input_val)-1;
                input_obj.val(new_val);

                $(this).fncsUpdateRoomDisplayOrder(dis, new_val);
            }
        }
    });

    $.fn.fncsUpdateRoomDisplayOrder = function(dis,nval) { 
        var input_obj = dis.parent().find('.cscurrent');
        var rid = input_obj.data('rid');
        var pid = input_obj.data('pid');

        var datastring = {'nval':nval,'rid':rid,'pid':pid}
        var xhrequest = false;
        xhrequest = $.ajax({
            url: base_url+'update',
            type:'post',
            dataType: 'json',
            data:datastring,
            async:false, 
            beforeSend: function (){
                if (xhrequest) {
                    xhrequest.ajaxStop();
                    console.log("xhrequest");
                }
            },
            success: function(data){
                xhrequest = false;
                console.log(data);
            }
        });
    }
});
</script>

CSS:

<style type="text/css">
.csdisplayorder{width: 62px;text-align: center;}
.csdisplayorder .cscurrent{width: 25px;float: none;background-color: white;border: none;text-align: center;}
.csdisplayorder .csplus,.csminus{padding: 3px;background-color: grey;color: white;border-radius: 10px;}
.csdisplayorder .csminus{float: left; }
.csdisplayorder .csplus{float: right;}
.csdisplayorder .cscurrent_txt{width:25px;float:none;vertical-align:-webkit-baseline-middle;vertical-align: sub;}
.csdisplayorder input[type=number].cscurrent::-webkit-inner-spin-button, 
.csdisplayorder input[type=number].cscurrent::-webkit-outer-spin-button { 
  -webkit-appearance: none; margin: 0; }
</style>

Optionally Remove the Gutter Padding from Columns

Optionally Remove the Gutter Padding from Columns

HTML:

<h1>CSS Helper for Gutterless <strong>Bootstrap 3</strong> Columns <i class="fa fa-heart"></i></h1>

<div class="container">
 <div class="row">
 <h2>With Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>
</div>

<div class="container">
 <div class="row no-gutter">
 <h2>Without Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>

</div>

CSS:

/*======================================
= NO GUTTER CODE =
======================================*/
.no-gutter > [class*='col-'] {
 padding-right:0;
 padding-left:0;
}

/*=========================================
= IGNORE - USED FOR LAYOUT =
=========================================*/
h1 { margin-bottom: 50px; }
h1, h2 { text-align: center; }
.container {
 background: #e3e3e3;
 margin-bottom: 20px;
 padding-bottom: 50px;
}
p {
 background: pink;
 margin: 0;
}
i {
 color: pink;
}

source: https://codepen.io/ncerminara/pen/hfvix/