How to align text vertically in panel using bootstrap 3 - html

Question

I have an image and a description of a panel panel-default. The image is pulled to the left and the description is on the right side.
The image has the img-responsive class so when I resize the window it fits the panel body.
The question is how can I achieve the same effect with the description. I would like to align it vertically to the panel and when I resize the window it should also fit the panel body.
What I have tried so far:
.container {
padding-top: 30px;
}
p {
font-size: 2vw;
}
.panel {
border-radius: 0;
}
.panel-body {
padding: 0;
}
.panel-description {
margin-top 12px;
padding-left: 3px;
}
.vertical-center {
display: flex;
align-items: center;
}
.no-padding {
padding: 0;
}
.no-padding-right {
padding-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 col-md-4 no-padding-right">
<div class="panel-image">
<img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
</div>
</div>
<div class="col-sm-8 col-md-8 no-padding">
<div class="panel-description vertical-center">
<p>Name<br>Surname</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
I added
.vertical-center {
display: flex;
align-items: center;
}
to the .panel-description but it's not working.
What is the best solution for this problem?
https://jsfiddle.net/DTcHh/39282/

Answer 1

I made little change in your code and its working well now. Here is the updated code for your reference
.container {
padding-top: 30px;
}
p {
font-size: 2vw;
}
.panel {
border-radius: 0;
}
.panel-body {
padding: 0;
}
.panel-description {
margin-top 12px;
padding-left: 3px;
}
.no-padding-right {
padding-right: 0;
}
.main-class {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
}
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="main-class">
<div class="col-sm-4 col-md-4 no-padding-right">
<div class="panel-image">
<img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
</div>
</div>
<div class="col-sm-8 col-md-8 no-padding">
<div class="panel-description vertical-center">
<p>Name<br>Surname</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>