在右侧创建响应元素

Question

I have problem with creating responsive div on this same height like image on left side. In this div I want to add text but when I'm doing it, paragraph stretches in height and div element too when I trying change resolution of window. Check 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> 

Answer 1

What if you did something like this with position:absolute; on the #right-side element?

CodePen

 header{ background-color: #282828; width: 100%; height: 35em; } header > h1{ color: #A98646; font-family: 'Righteous'; font-size: 4rem; text-align: center; padding-top: 6.75rem; } header .logo{ width: 40px; margin-left: 2rem; margin-top: 2rem; opacity: 0.3; } header .logo:hover{ opacity: 1; transition: 0.2s; } nav{ float: right; margin-right: 2rem; margin-top: 0rem; text-align: center; cursor: pointer; } nav li{ display: none; background-color: black; } nav>ul>img{ width: 100px; } header > p{ text-align: center; margin-top: 30px; color: white; font-family: 'Old Standard TT', serif; } #left-side{ width: 50%; height: 60em; background-color: black; float: left; text-align: center; display: inline-block; } .image { height: 100%; position: relative; } #left-side>div>img{ margin-top: 15%; border: solid #A98646 2px; border-bottom: none; width: 50%; height: 75%; } #right-side{ width: 50%; height: 100%; background-color: red; text-align: center; display: inline-block; position: absolute; } .description{ width: 50%; height: 75%; margin: 15% auto; background: green; } section { height: 100%; display: inline-block; position: relative; width: 100%; } 

 <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>