fixed height profile box and keep it responsive - html

Question

I need to style those elements from gentelella template:
https://colorlib.com/polygon/gentelella/contacts.html
and this is my implementation
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12 col-xs-12">
<div class="crop col-md-4 col-sm-12 col-xs-12 text-center ">
<img src= "https://media-cdn.tripadvisor.com/media/photo-s/0d/bf/07/9b/post-card-view.jpg" alt="" class="img-icon-template img-fluid ">
</div>
<div class=" col-md-8 col-sm-8 col-xs-12">
<div class="">
<h4 class="brief titolo_template"><i>TITLE</i></h4>
<div><i class="fa fa-user"><strong> user XXX </i> </div>
<p class="descr_p"><i class="fa fa-file-text-o"> <strong> descr: </strong> </i>something</p>
</div>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-12 emphasis text-left">
<p class="">
<a>relase date </a><i>dd/mm/aaaaa #endif</i>
</p>
<div class="col-md-6 col-sm6">
<a class="btn-block btn-success btn-xs text-center"
role="button" id="btnT2"
href="/templateGraphic/idxxx"
<i class="fa fa-sort-amount-asc "></i>view tamplate
</a>
</div>
<div class="col-md-6 col-sm-6">
<a class="btn-block btn-info btn-xs text-center"
role="button" id="btnT1"
href="alo/oo"
class="btn btn-info btn-xs">
<i class="fa fa-comments-o"></i> get replies
</a>
</div>
</div>
</div>
</div>
</div>
as you can see there are no fixed height, and if there is long description, as for example in the last box, the box is going to be bigger and bigger.
The problem is if fix max-height for the container that's will not work, same thing for the things inside because it makes all responsive rules and media query not working after.
the only solution that I've found is cutting text inside <p> with
.descr_p{
max-height: 90px;
text-overflow: ellipsis;
/* white-space: nowrap; */
overflow: hidden;
}
but if uncomment white space: nowrap a mess like this happens:
so the questions are 2 :)
which one is the best way to fix maximum dimension and keep the whole thing responsive.
how can I make otherwise "whitespace: nowrap" working;
apologize if I've asked silly things but I'm very newbie in CSS styling.

Answer 1

You need to apply max-width property in descr_p according to what you want. max-height would not work.
.descr_p{
max-width: 105px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Also , you can use flexbox to design your layout. You would not need to worry about size of text then.

Answer 2

Your structure is wrong. If you reduce width of the screen to below 1180px. There is not space to Address and mobile number.
you can use 'Media Object' and simplify your structure. Media Object
And for height issue you can use below jquery:
jQuery(function($) {
var tallest = 0;
$('.profile_view .col-sm-12').each(function() {
var height = $(this).height();
if (height > tallest) {
tallest = height;
}
});
$('.profile_view .col-sm-12').height(tallest);
});