I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change the window resolution. View codepen
HTML:
#left-side {
width: 50%;
height: 60em;
background-color: black;
float: left;
text-align: center;
display: inline-block;
}
#left-side>div>img {
margin-top: 15%;
border: solid #A98646 2px;
border-bottom: none;
width: 50%;
height: 25%;
}
#right-side {
width: 50%;
height: 60em;
background-color: red;
float: left;
text-align: center;
display: inline-block;
}
.description {
margin-top: 15%;
width: 50%;
height: 72%;
margin-left: 25%;
background: green;
}<section>
<article id="left-side">
<div class="image">
<img src="img1.jpg">
</div>
</article>
<article id="right-side">
<div class="description">2</div>
</article>
</section>