Placing div at the bottom - html

Question

I am trying to place content-desc div to the bottom of content-box-inner but it's not placing there, it's going just after the image:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: relative;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
<div class="content-box-inner">
<div class="content-title">
<p>text</p>
</div>
<img src="img.jpg">
<div class="content-desc">
<p>some text</p>
</div>
</div>
Does anyone know, what I did wrong in my CSS?

Answer 1

Have you tried using position: absolute;? adding position: absolute; bottom: 0; should fix your issues.

Answer 2

Change
.content-desc {
position: relative;
...
}
to
.content-desc {
position: absolute;
...
}

Answer 3

you will want your .content-desc to be set to absolute positioning:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
see link to fiddle here: https://jsfiddle.net/john_h/w05hwuxp/